my first bash at some CSS (help needed)

snow patrol

snow patrol

snow patrol

Soldato
Joined
20 Oct 2002
Posts
3,923
Location
London
ok, i did a bit of reading and got a very sketchy idea of the principles of CSS, and i have to say i like it.

I downloaded a template and did a bit of experiementing etc and came up with:

http://www.mathofbirds.com/williamtest1/wiv2.html

i know it's very very very early on, but already i've got a couple of head scratchers.

Firstly: It looks neater in firefox. On IE6 the footer is indented slightly on both sides - any ideas why? Also, why is there more white space on the ie6 one?

Sorry for these stupid questions. I'm sure they'll be lots more ;) Thanks guys.

edit: 'fixed' the footer issue by specifying a width of 950px. Just not quite sure why the issue arose in the first place.

I suppose CSS is just something one learns as one goes along? Having fun already tbh :)
 
Last edited:
You will quickly find IE (especially < 6) renders pages quite different from other browsers.

I find the best way to ensure correct rendering is to be explicit in your css. Don't leave settings on default. Also its handy to have a seperate CSS file for all your IE hacks using the conditional comment which only IE uses.

Code: 
<!--[if lt IE 7]>
<link rel="stylesheet" href="iestyle.css" type="text/css" />
<![endif]-->
 
This worries me:

Code: 
<blockquote>
  <p><strong>Welcome to The William IV Bar &amp; Restaurant.</strong></p>

  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>The William IV is a large pub which serves nice grub. The William IV is a large pub which serves nice grub. The William IV is a large pub which serves nice grub. </p>
  <p>&nbsp;</p>
  <p>The William IV is a large pub which serves nice grub. <strong>The William IV is a large pub which serves nice grub.</strong> The William IV is a large pub which serves nice grub. </p>
  <p>The William IV is a large pub which serves nice grub. </p>

  <p>&nbsp;</p>
  <p>The William IV is a large pub which serves nice grub. The William IV is a large pub which serves nice grub. </p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p><strong>The William IV is a large pub which serves nice grub. </strong></p>
</blockquote>

No need for the blockquote, and definatley no need for all the paragraphs. Use margins within CSS to place content rather than resorting to using markup.

CSS is really simple to get to grips with when you can iron out all the little quirks. :)
 
Ok, I decided to give your XHTML a spring cleaning. From my experience with CSS, this design can be acomplished more than easily using the following markup.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" ><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>

	<title>William IV Bar &amp; Restaurant</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="layout.css" type="text/css" />
	<!--[if lt IE 7]>
	<link rel="stylesheet" href="ielayout.css" type="text/css" />
	<![endif]--> 

</head>
<body>

<div id="container" >

	<h1>William IV</h1>
	<h2>Bar - Restaurant</h2>

	<div id="top">
	
		<img src="logo.gif" alt="Logo" />

		<ul id="nav">
		<li><a href="menu.html" title="Menu">Menu</a></li>
		<li><a href="location.html" title="Location">Location</a></li>
		<li><a href="function.html" title="Function Rooms">Function Rooms</a></li>
		<li><a href="events.html" title="Events">Events</a></li>
		<li><a href="feedback.html" title="Feedback">Feedback</a></li>
		<li><a href="contact.html" title="Contact">Contact</a></li>
		</ul>

	</div>

	<div id="sidebar-left">	

		<ul>
		<li><img src="rest01.jpg" width="160" height="130" alt="rest1" /></li>
		<li><img src="snug01.jpg" width="160" height="130" alt="snug1" /></li>
		<li><img src="bar01.jpg" width="160" height="130" alt="bar1" /></li>
		</ul>
	
	</div>

	<div id="content">
	
		<h3>Welcome to The William IV Bar &amp; Restaurant.</h3>
		
		<p>The William IV is a large pub which serves nice grub. The William IV is a large pub which serves nice grub. The William IV is a large pub which serves nice grub. </p>
		<p>The William IV is a large pub which serves nice grub. The William IV is a large pub which serves nice grub. The William IV is a large pub which serves nice grub. </p>
		<p>The William IV is a large pub which serves nice grub. </p>
		<p>The William IV is a large pub which serves nice grub. The William IV is a large pub which serves nice grub.</p>
		<p>The William IV is a large pub which serves nice grub.</p>
	
	</div>
		
	<div id="sidebar-right">
		
		<ul>
		<li><img src="bar02.jpg" width="160" height="130" alt="bar1" /></li>
		<li><img src="gard02.jpg" width="160" height="130" alt="gard1" /></li>
		<li><img src="rest02.jpg" width="160" height="130" alt="rest2" /></li>
		</ul>
	  
	</div>

	<div id="footer">
	
		<p>WILLIAM IV BAR - RESTAURANT | 786 HARROW ROAD | LONDON NW10 5JX | 020 8969 5944</p>
		
	</div>

</div>

</body>
</html>
 
hi guys - appreciate the comments and efforts you're putting in.

i've figured out how to use the margins in the content div. But should i be using them instead of paragraphs even?

:)
 
Last edited:
What's with all the unnecessary divs?

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" ><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>

	<title>William IV Bar &amp; Restaurant</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="layout.css" type="text/css" />
	<!--[if lt IE 7]>
	<link rel="stylesheet" href="ielayout.css" type="text/css" />
	<![endif]--> 

</head>
<body>

<div id="container" >

	<h1>William IV</h1>
	<h2>Bar - Restaurant</h2>

	<div id="top">
	
		<img src="logo.gif" alt="Logo" />

		<ul id="nav">
		<li><a href="menu.html" title="Menu">Menu</a></li>
		<li><a href="location.html" title="Location">Location</a></li>
		<li><a href="function.html" title="Function Rooms">Function Rooms</a></li>
		<li><a href="events.html" title="Events">Events</a></li>
		<li><a href="feedback.html" title="Feedback">Feedback</a></li>
		<li><a href="contact.html" title="Contact">Contact</a></li>
		</ul>

	</div>

	<ul id="sidebar-left">
		<li><img src="rest01.jpg" width="160" height="130" alt="rest1" /></li>
		<li><img src="snug01.jpg" width="160" height="130" alt="snug1" /></li>
		<li><img src="bar01.jpg" width="160" height="130" alt="bar1" /></li>
	</ul>

	<div id="content">
	
		<h3>Welcome to The William IV Bar &amp; Restaurant.</h3>
		
		<p>The William IV is a large pub which serves nice grub. The William IV is a large pub which serves nice grub. The William IV is a large pub which serves nice grub. </p>
		<p>The William IV is a large pub which serves nice grub. The William IV is a large pub which serves nice grub. The William IV is a large pub which serves nice grub. </p>
		<p>The William IV is a large pub which serves nice grub. </p>
		<p>The William IV is a large pub which serves nice grub. The William IV is a large pub which serves nice grub.</p>
		<p>The William IV is a large pub which serves nice grub.</p>
	
	</div>
		
	<ul id="sidebar-right">
		<li><img src="bar02.jpg" width="160" height="130" alt="bar1" /></li>
		<li><img src="gard02.jpg" width="160" height="130" alt="gard1" /></li>
		<li><img src="rest02.jpg" width="160" height="130" alt="rest2" /></li>
	</ul>
	
	<p id="footer">WILLIAM IV BAR - RESTAURANT | 786 HARROW ROAD | LONDON NW10 5JX | 020 8969 5944</p>

</div>

</body>
</html>
 
I don't like to cram my selecters with styling :)

Edit: Oh and the left and right sidebar divs are there for future content incase what is inserted isn't worthy of an unorderd list.
 
thanks for the comments guys, it's really great that people are willing to devote some of their time to help others just getting to grips with things.

Any way, whilst i haven't trimmed my css yet, i did have a go at some fancy css picture overlays.

http://www.mathofbirds.com/williamtest1/wiv4.html

The only thing i can't figure out with them though, is that in IE6, the text caption has each word using a new line, whereas in firefox it's as it should be, just a regular line for the caption.

Any ideas on that one? Thanks.

Edit: and besides the messy coding, do you guys think the actual layout / aesthetics of the site is ok?

The owner wants me to update the old one (http://www.elparadorlondon.com/WilliamIV/) - note, i DIDN'T design that one!
 
You must log in or register to reply here.
Back
Top Bottom