any html5 experts here

roelof · June 9, 2013

Hello,

I'm trying to develop a new theme for my site.

First I try to make it with html5 and css3. But I stuck now.

You can see the problem at http://test2.tamarawobben.nl

Anyone who can help me figure out what is wrong ?

Roelof

kongondo · June 9, 2013

Roelof,

A bit more description about what you want to achieve would help. I am not sure what the problem is.

These tools are also helpful:

http://validator.w3.org/

http://jigsaw.w3.org/css-validator/

roelof · June 9, 2013

Hello,

The problem is that I want to center the book image in the center of the browser and it must be centered in every browser and size.

In that div I need two content area. One for the left and one for the right page. The red div must be cover the white area of the left page.

Roelof

Soma · June 9, 2013

Moved to dev talk board.

Manfred62 · June 9, 2013

that's a css problem, not html (there's nearly no html). If you want to center the #content --> give it a width and margin: 0 auto.

Not sure, what's your goal? You want to center the 'book' and split it inside into 2 vertical rows?

roelof · June 9, 2013

yes, That's correct but I want to center it horizontally and vertically.

If I do that will it Always center even if the browser changes size.

Roelof

3fingers · June 9, 2013

I'm a bit in a hurry right now but i suggest you to take a look at this script to always center a div that has a percent width ( the "content" div you got has px based width = no good if you want to let it resize at any width).

If you want to stuck with px width you need to use media queries ( also known as breakpoints ) to define width dimensions at different scales.

Manfred62 · June 9, 2013

take a look at this demo code:

<!DOCTYPE html>
<html lang="nl">
<head>
	<meta charset="UTF-8">
	<title>Test</title>
	<style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}
	body {
		background: url(achtergrond.jpg) center top no-repeat;
		font: 100%/1.5 sans-serif;
		padding: 20px 0;
	}
	#content {
		width: 1536px;
		margin: 0 auto;
		background: url(boek2.jpg) center top no-repeat;
		min-height: 864px;  
	}
	article {
		width: 50%;
		float: left;
	}
	aside {
		width: 50%;
		float: left;
	}
	article p {
		margin: 20px 80px;
		background: #FF8080;
	}
	aside p {
		margin: 20px 90px;
		background: #8080FF;
	}
	</style>
</head>
<body>
	<div id="content">
		<article>
			<p>inhoudsopgave</p>
		</article>
		<aside>
			<p>Hier komt de artikel</p>
		</aside>
	</div>
</body>
</html>

but I think you should restart this concept. It's too big (size) and also unflexible. Because of the size (1536x864) it's nearly senseless to center it vertically.

roelof · June 9, 2013

Oke, maybe I must made my book image much smaller around 800 px ?

I get inspired by this idea : http://www.20thingsilearned.com/nl-NL and I thought I could use the left page for a menu and the right page for the tekst.

Roelof

roelof · June 9, 2013

I have found the source code but I cannot find out what I have to change to show my own background-image

totoff · June 10, 2013

#content { 
    display:block;
    background:url(../img/boek2.jpg);
    min-width: 1536px;
    min-height: 864px;
    top: 10%;
    left: 10%;
    right: 25%;
    text-align: left;
    position: fixed;
}

background style definition in line 106 of main.css (see above) defines the background image of your book. the site background is defined twice: in line 13 of main.css and line 72 of normalize.css

does this answer your question? if you are unfamiliar with html and css basics it might be helpful to go through a tutorial before you continue with your site. the w3 shools are a good starting point.

Soma · June 10, 2013

http://www.w3fools.com/

roelof · June 10, 2013

Thanks,

Everyhing works now fine. So it's now time to try to solve the validation errors.

Last question : This script works that everything is already in the html code and that the only the page you want is not hidden. The rest is hidden.

I have a site with some 800 pages. I think things will be very slow this way.

Is there another solution but that the book still works ?

if so, can someone help me to port this to PW.

Roelof

roelof · June 10, 2013

Oke,

Let me ask real questions.

I have a custom field named datum. Which contains the date something happens.

Now I need a menu like this :

<div class="categories">
 
<ul class="menu" 
id="menu1">
 
<li>
 
<a href="#">2005</a>
 
<ul class="acitem">
 
<li>
 
<a href="http://www.tamarawobben.nl/dagboek/2005/02/1">februari</a>
 
</li>
 
<li>
 
<a href="http://www.tamarawobben.nl/dagboek/2005/03/1">maart</a>
 
</li>
 
<li>
 
<a href="http://www.tamarawobben.nl/dagboek/2005/04/1">april</a>
 
</li>
 
<li>
 
<a href="http://www.tamarawobben.nl/dagboek/2005/05/1">mei</a>
 
</li>
 
<li>
 
<a href="http://www.tamarawobben.nl/dagboek/2005/06/1">juni</a>
 
</li>
 
<li>
 
<a href="http://www.tamarawobben.nl/dagboek/2005/07/1">juli</a>
 
</li>
 
<li>
 
<a href="http://www.tamarawobben.nl/dagboek/2005/08/1">augustus</a>
 
</li>
 
<li>
 
<a href="http://www.tamarawobben.nl/dagboek/2005/09/1">september</a>
 
</li>
 
<li>
 
<a href="http://www.tamarawobben.nl/dagboek/2005/10/1">oktober</a>
 
</li>
 
<li>
 
<a href="http://www.tamarawobben.nl/dagboek/2005/11/1">november</a>
 
</li>
 
<li>
 
<a href="http://www.tamarawobben.nl/dagboek/2005/12/1">december</a>
 
</li>
 
</ul>
 
</li>
 
<li>
 
<a href="#">2006</a>
 
<ul class="acitem">
 
<li>
 
<a href="http://www.tamarawobben.nl/dagboek/2006/01/1">januari</a>
 
</li>
 
<li>
 
<a href="http://www.tamarawobben.nl/dagboek/2006/02/1">februari</a>
 
</li>
 
<li>
 
<a href="http://www.tamarawobben.nl/dagboek/2006/03/1">maart</a>
 
</li>
 
<li>
 
<a href="http://www.tamarawobben.nl/dagboek/2006/04/1">april</a>
 
</li>
 
<li>
 
<a href="http://www.tamarawobben.nl/dagboek/2006/05/1">mei</a>
 
</li>
 
<li>
 
<a href="http://www.tamarawobben.nl/dagboek/2006/06/1">juni</a>
 
</li>
 
<li>
 
<a href="http://www.tamarawobben.nl/dagboek/2006/07/1">juli</a>
 
</li>
 
<li>
 
<a href="http://www.tamarawobben.nl/dagboek/2006/08/1">augustus</a>
 
</li>
 
<li>
 
<a href="http://www.tamarawobben.nl/dagboek/2006/09/1">september</a>
 
</li>
 
<li>
 
<a href="http://www.tamarawobben.nl/dagboek/2006/10/1">oktober</a>
 
</li>
 
<li>
 
<a href="http://www.tamarawobben.nl/dagboek/2006/12/1">december</a>
 
</li>
 
</ul>
 
</li>
 
<li>
 
<a href="#">2007</a>

How can I make this. There could be more then 1 article in a month but I need every month one time.

Roelof

OrganizedFellow · June 11, 2013

Oke,

Let me ask real questions.

How can I make this. There could be more then 1 article in a month but I need every month one time.

Roelof

Your questions above were more about structure of your HTML and CSS.

You seem very new here to the ProcessWire forums, welcome

I encourage you to learn more and follow these tutorials:

http://wiki.processwire.com/index.php/Basic_Website_Tutorial

http://wiki.processwire.com/index.php/Simple_News_System

Also, you should dissect the default site profile to get a better understanding on how the API works.

Then go the 'Site Profile' section of the Modules page and check out some of the profiles there. The 'Blog' and 'Skyscrapers' are incredibly cool! They will teach you some new methods of organizing your templates and how to call your page/pages data. VERY cool stuff!

http://modules.processwire.com/categories/site-profile/

Welcome to the forums. We are glad to help you out, but you've got to help yourself first

roelof · June 11, 2013

Thanks,

I think I can use some of the ideas. The only thing I could not find is a way to make a list of unique months and years.

I could use the idea how the blog is doing it but if I make everything manually I get a very very big file.

I have about 8 years articles.

Roelof

Soma · June 11, 2013

This isn't as simple as it may seems and even programmers have their difficulties, it can get very tricky and some approaches may get very inefficient.

One way could be to get the oldest and newest article and cycle months and years, and output a menu entry only if at least an article found within that month.

Before anyone going to code 1 hours for what you need, is the structure of your article as you show in your example already? Meaning are articles already in a date structure? /dagboek/2005/07/1/article1 ...

If so, it would be very easy. If not, rendering the menu is a lot more complex and you also will need to use urlSegments for showing a list of articles of a month.

roelof · June 11, 2013

At this moment the datastructure is not as my example but I could make it that way.

Now I put everything in the structure dagboek with as fields datum(date), titel (title) and the tekst (text )

Im looking for the easist way to make things working.

Roelof

OrganizedFellow · June 11, 2013

Im looking for the easist way to make things working.

Roelof

EASY may not always be BEST

sometimes ya gotta get a little more dirty and involved with more code to get something to work.

It took me many hours of testing this and that, and I finally have a CSS drop menu that works with my nested unordered lists. I don't know much about PHP, but everything I have learned has been because PW uses it to display data.

roelof · June 11, 2013

On that point you are right.

What I try to achieve is a menu like the one I have now on my site

and I know I have to learn a lot but what the best way to get to my goal. Porting my site (http://www.tamarawobben.nl) to a new layout like 20thingslearned and keep it managble. But what then the best way to do it I still do not have a clue.

Roelof

roelof · June 12, 2013

Hello,

I did a little more investigating how the example site works. Appearently I need to make all the pages hidden except the current one.
So I think that the structure /dagboek/year/month/pagenumber is the best. I can then make a hidden directory where I can set which page must be hidden and which not.

Roelof

Soma · June 12, 2013

Maybe best if you open a new thread with your question in the PW support forum...

Sign In

any html5 experts here

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Recently Browsing 0 members