Basic css layout notepad issues

[Maxx-iT]

Hi there

First and formost I want to wish everyone at Sitepoint my best wishes for 2013!!

My niece is due to have an webdesign exam in about a week, and she asked me to check upon her testexam.
She has to make the site exactly as seen in restaurant.jpg.
Problem is the basic design which she did not do like we should. Although the website looks quite as it should be there are still some problems which honestly I cant solve myself.
THat's why I am asking you guys to help out.
Homepage.html is what she has right now.This is her css-file which she created in notepad, it's all in the .rar file.restaurantt.jpgEline-Philips-werkstuk-1GDMCa.zip
She worked with divs into divs, which I like, for some placement issues, she inserted also some tables, because they are more easily positioned.
Header, text worked fine, until we have to position the orange textboxes into the pictures.
There are two options to get them right:
- rewrite the whole site from the beginning (please some advice on the basic startup then please )?
- finding how to place the orange textboxes anyways with the current lay-out (My knowledge doesn't reach that far (for now))

Any other advice on how to simplify this site is always welcome.

(note: she made the site on a Mac, so it might be slightly different. Dreamweaver or any other program is forbidden, notepad is the only thing allowed)

Thank you very much in advance!

Kind regards
Maxx-iT

[Paul O'B]

Hi,

We can help with specific questions on CSS but asking us to do someone's homework isn't really ethical and you would have been better off asking specific general questions without referring to the homework.

I can give you a start with your orange boxes and you would be better off putting the images in the background of the div and then set position:relative on the div to create a local stacking context so that you can absolutely place the orange section to the bottom of that div. You can't nest the p element inside an anchor (only in html5) and you don't need that extra element anyway.

You can reduce the code to this:

.tekst {
	background:url(kamers.jpg) no-repeat 0 0;
	width:200px;
	height:180px;
	float:left;
	margin:20px;
	position:relative;
}
.tekst a{
position:absolute;	
bottom:10px;
right:10px;
padding:15px;
background-color:#F80;
color: white;
text-decoration: underline
}
.img1{background:url(kamers.jpg) no-repeat 0 0}
.img2{background:url(restaurant.jpg) no-repeat 0 0}
.img3{background:url(stadsplan.jpg) no-repeat 0 0}
.img4{background:url(reservaties.jpg) no-repeat 0 0}

		<div id="images">
				<div class="tekst img1"><a href="#">Onze kamers</a></div>
				<div class="tekst img2"><a href="#">Het restaurant</a></div>
				<div class="tekst img3"><a href="#">Stadsplan Gent</a></div>
				<div class="tekst img4"><a href="#">Reservaties</a></div>
		</div>

That should give you the required result. (There is also no need for the class="tekst" on each div as you can reach those by saying #images div{styles etc..} and save all those extra classes. I would probably have used a list structure instead of all the divs for that section as they are a list of things and then you could style them via ul#images li{styles etc..}.)

[Maxx-iT]

Hi there! thanks for the reply!! I really appreciate it. Off course it was not my intention to have the whole job done for her. I just wanted some input on the basic lay-out and a solution for the orange boxes problem.
I am not looking for an entire design, but any tips on how to make it better, and improve her/my skills by setting up a basic website is always welcome. I'm sorry if you had the impression I wanted you to do the whole thing .
If you still have any suggestions how to improve the site or basic structure, please feel free. Or just to tell us she is on the right way.

Thanks a lot!
Maxx-iT

[Paul O'B]

No Worries

Always run your code through the css and html validators at the w3c to catch typos and any incorrect rules.

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

You will soon see what needs to be fixed.

e.g.( align: center ) there is no css property called align.

For your navigation use a list structure as bare links next to each other are bad for accessibility.

<div id="navigatie"> <a href="homepage.html" class="anavigatie">Home</a> <a href="http://www.google.be" class="anavigatie">Hotel</a> <a href="http://www.google.be" class="anavigatie">Restaurant</a> <a href="http://www.google.be" class="anavigatie">To do</a> <a href="http://www.google.be" class="anavigatie">Info &amp; reservatie</a> <a href="aboutme.html" class="anavigatie">Over de auteur</a> </div>

It shoudl be something like this:

<ul id="navigatie">
		<li><a href="#">Link</a></li>
		<li><a href="#">Link</a></li>
		<li><a href="#">Link</a></li>
		<li><a href="#">Link</a></li>
</ul>

Much neater and easier to read and more semantic and accessible.

There should really only be one h1 per page (excluding rare exceptions). The other headings should then follow in a logical order and not jump levels (not that you are).

Don't style the html element but rather style the body element instead as that is automatically propagated to the html element anyway and thus gives browsers support to older browsers that use body as the root. All you need to style on the html element is to remove margins and padding otherwise leave it alone.

Other than that the code doesn't look too bad.

[Maxx-iT]

[QUOTE=Paul O'B;5279013]Hi,


You can reduce the code to this:

.tekst {
	background:url(kamers.jpg) no-repeat 0 0;
	width:200px;
	height:180px;
	float:left;
	margin:20px;
	position:relative;
}
.tekst a{
position:absolute;	
bottom:10px;
right:10px;
padding:15px;
background-color:#F80;
color: white;
text-decoration: underline
}
.img1{background:url(kamers.jpg) no-repeat 0 0}
.img2{background:url(restaurant.jpg) no-repeat 0 0}
.img3{background:url(stadsplan.jpg) no-repeat 0 0}
.img4{background:url(reservaties.jpg) no-repeat 0 0}

		<div id="images">
				<div class="tekst img1"><a href="#">Onze kamers</a></div>
				<div class="tekst img2"><a href="#">Het restaurant</a></div>
				<div class="tekst img3"><a href="#">Stadsplan Gent</a></div>
				<div class="tekst img4"><a href="#">Reservaties</a></div>
		</div>

Got the code to work and filtered some stuff out of the rest. I still have one problem with the code above: the links inside the orange boxes can't be underlined, but have a border-bottom. However I can't seem to find a way in your code to fix this. If I apply the border-bottom to the .tekst a, I get a border on the orange box and not under the text.
Is there a way to fix this, without making extra classes again?

Thanks!!

[Paul O'B]

Got the code to work and filtered some stuff out of the rest. I still have one problem with the code above: the links inside the orange boxes can't be underlined, but have a border-bottom. However I can't seem to find a way in your code to fix this. If I apply the border-bottom to the .tekst a, I get a border on the orange box and not under the text.
Is there a way to fix this, without making extra classes again?

Thanks!!

Why do you want a border-bottom.?

Links are naturally underlined with text-decoration:underline as in my above code. Don't alter the default behaviour of the browser - just let it do what it knows best. text-decoration:underline is fine.

If you really must use a border then you will need t nest a span inside the anchor like so:

<div class="tekst img1"><a href="#"><span>Onze kamers</span></a></div>

.tekst a{text-decoration: none}
.tekst a span{border-bottom:1px solid #fff;padding:0 0 2px}

Be aware that you may confuse users if you move the border too far away as they won't know if its a link or a border as they are used to links with underlines hugging the link and not positioned at some distance.

[Maxx-iT]

It's an assignment of the teacher apparantly :-). I don't mind the underlining aswell, but hey that's what university is for I guess .

Thanks heaps!

[Paul O'B]

It's an assignment of the teacher apparantly :-).

The teacher should know better

The web is built on links and you shouldn't really mess with them for aesthetic purposes. Browsers will naturally vary where they place the text-decoration:underline and trying to control this position exactly is futile and resorting to using borders instead is not really a viable solution for all links. However as an exercise in coding then its ok but may have the drawback of encouraging pupils to think that this is how you do it for all links.

[Stomme poes]

My pleeg-brother-in-law was in game design class and they had a class with web design too (something to do with, game designers learning to market their stuff or something...).

Teacher had everyone use some ancient version of DreamWeaver, and everything was covered in <font> tags. University == crap when it comes to web anything. She can do it for class, but don't let her think it's actually good or correct. Teacher and course is at least 10 years out of date.