Help with HTML and CSS...

Amp34 · 27 May 2010 at 23:57

Right, it's been a while since I did much with HTML and CSS so I'm very rusty...

I'm trying to make a simple homepage and have got stuck at the first hurdle...

Essentially I want the site to look sort of like this...

The two yellow boxes are there for future logos and images and the four boxes at the bottom for text and photos. The container will wrap around all the divs and the "container 2" will hopefully sit below the nav bar and contain the four boxes (not coded in).

What I have at the moment is this http://wildaboutlife.net/test/site/

This is the HTML I've written so far:

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>title</title>
<link href="CSS.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id=container>
	<div id="top left">
    </div>
    <div id="top right">
    </div>
    <div id="nav bar">
    </div>
    <div id="image"><img src="1.jpg" width="940" height="250" alt="main image" />
    </div>
    <div id="container 2">
    </div>      
</div>
</body>
</html>

and this is the CSS:

Code:

body{
	background-image:url(back1.gif);
	font-family:Verdana, Geneva, sans-serif;
	font-size:small;
}
container{
	margin-top:25px;
	width:950px;
	margin-left:auto;
	margin-right:auto;
}
top left{
	float:left;
	width:140px;
	height:120px;
	background-color:#FF9
}
top right{
	float:right;
	width:500px;
	height:120px;
	background-color:#FF9
}
nav bar{
	height:35px;
	background-color:#666;
	background-image:url(side-noside.png)
}
container2{
}

What am I doing wrong? :confused:

Thanks

Amp34 · 28 May 2010 at 00:47

Thanks, I knew it would be something so simple.

Amp34 · 28 May 2010 at 01:09

Next question (site updated in first link).

With that done some of the elements overlap each other, now what is the best way of adjusting them?

For example the #navbar (grey bar between the image and yellow boxes), should I use the "relative" or "absolute" command?

At the moment I'm using:

Code:

#navbar{
	position:relative;
	top:120px;
	height:35px;
}

Should I be using that or the absolute positioning? Same with the 4 boxes at the bottom, which want to be side by side? I assume it doesn't really matter with a static site like the one I'm making but what is the "best" way of doing it?

Finally I take it I need to use the position command on all of the divs in the container to get them in the right place?

EDIT: right i've adjusted the 4 boxes at the bottom but the coding seems overly complex?

Code:

#cont1{
	float:left;
	width:220px;
	height:240px;
	background-color:#666;
}
#cont2{
	position:relative;
	left:240px;
	width:220px;
	height:240px;
	background-color:#666;
}
#cont3{
	position:relative;
	left:480px;
	top:-240px;
	width:220px;
	height:240px;
	background-color:#666;
}
#cont4{
	position:relative;
	top:-480px;
	left:720px;
	width:220px;
	height:240px;
	background-color:#666
}

There is lots of adjusting, is there a cleaner way of doing it?

Amp34 · 28 May 2010 at 20:35

Right so this is the full part there...

Code:

#cont1, #cont2, #cont3, #cont4{
	width:220px;
	height:240px;
	background-color:#666;
}
#cont1{
	float:left;
}
#cont2{
	float:left;
	margin-left:20px;
}
#cont3{
	float:right;
}
#cont4{
	float:right;
	margin-right:20px;
}

Now Class, how would I set one up for this situation, whilst still allowing the variability of the 4 boxes?

Would I do

Code:

.cont{
	width:220px;
	height:240px;
	background-color:#666;
}
#cont1{
	float:left;
}
#cont2{
	float:left;
	margin-left:20px;
}
#cont3{
	float:right;
}
#cont4{
	float:right;
	margin-right:20px;
}

but then how would I integrate that into the HTML? The tutorials I've looked at aren't very clear on the subject.

Amp34 · 28 May 2010 at 22:51

Right, i'm also having trouble with my "containers" for some reason. I have 3 containers in my site, the main one (red outlined, #container), the navigation one (black outline, at the top with 2 yellow and grey bar, #nav) and the content (containing all changeable content, including the 4 boxes, #container2).

Now it was my assumption with divs and containers that the container would go around all the content within it, so the red outline of the main container will go round every other div on the page and them stacking up against each other (unless padded)? This doesn't seem to be occuring for some reason, with all the things seeeming to make it up as they go along. :confused:

The link to the problem is http://wildaboutlife.net/test/site/ and the code if anyone wants to have a ganders is...

HTML:

Code:

<body>
<div id="container">
	<div id="nav">
    	<div id="topleft">
    	</div>
    	<div id="topright">
    	</div>
    	<div id="navbar">
    		<ul>
        	<li><a href="index.html">Home</a></li>
        	<li><a href="prints.html">Prints</a></li>
        	<li><a href="gallery.html">Gallery</a></li>
        	<li><a href="location.html">Locations</a></li>
        	<li><a href="wp.html">Blog</a></li>
        	</ul>
    	</div>
    </div>
 	<div id="container2">
    	 <div id="image"><img src="1.jpg" width="940" height="250" alt="main image" />
    	</div>
        <div id="cont1">
        	<div id="in1">
            </div>
        <img src="1.jpg" width="220" height="140" alt="image" />
        </div>
    	<div id="cont2">
            <div id="in2">
            </div>
        </div>    	
        <div id="cont3">
            <div id="in3">
            </div>
            <img src="1.jpg" width="220" height="140" alt="image" />
        </div>    	
        <div id="cont4">
            <div id="in4">
            </div>
        </div>
	</div>
    <div id="bottom">
    </div>
</div>
</body>

CSS

Code:

body{
	background-image:url(back1.gif);
	font-family:Verdana, Geneva, sans-serif;
	font-size:small;
}
#container{			/*main container for all content*/
	margin-top:25px;
	width:940px;
	margin:0 auto;
		border-width:1px;
	border-style:solid;
	border-color:#F00;
}
#bottom{
	position:absolute;
	height:35px;
	width:940px;
	background-color:#999
}
#nav{				/*navigation and logo container*/
	height:175px;
		border-width:1px;
	border-style:solid;
	border-color:#000000;
}
#topleft{
	float:left;
	width:140px;
	height:120px;
	background-color:#FF9
}
#topright{
	float:right;
	width:500px;
	height:120px;
	background-color:#FF9
}
#navbar{
	position:relative;
	top:130px;
	height:35px;
	width:940px;
	background-color:#999
}
/*nav bar*/
ul{
	list-style-type:none;
	float:right
}
li{
	display:inline
}
a:link,a:visited, a.active{
	font-weight:bold;
	color:#FFFFFF;
	text-decoration:none;
	position:relative;
	bottom:4px;
	left:470px;
}
a:hover{		/*when over link*/
color:#666;
}
#container2{			/*container for changeable content*/
	position:relative;
	top:95px;
	border-width:1px;
	border-style:solid;
	border-color:#03F;
}
									/*page specific*/
/*index*/
#image{
	width:940px;
	height:250px;
	overflow:hidden;
}
/*boxes*/
#cont1, #cont2, #cont3, #cont4{
	width:220px;
	height:240px;
	background-color:#666;
}
#cont1{
	float:left;
}
#cont2{
	float:left;
	margin-left:20px;
}
#cont3{
	float:right;
}
#cont4{
	float:right;
	margin-right:20px;
}
/*colour boxes*/
#in1, #in2, #in3, #in4{
	width:220px;
	height:100px;
}
#in1{
	background-color:#990
}
#in2{
	background-color:#3CF
}
#in3{
	background-color:#C36
}
#in4{
	background-color:#FF9
}

Now from what I understand the red border (#container) should go round everything on the page, the black one (#nav) should pin to the top of the red one and contain thetwo yellow boxes and navigation bar (grey strip) and finally the blue one (#container2) should butt up to the bottom of the black one and contain the 4 boxes, with the red border at the base of that. But obviously they are not.

Thanks.

Amp34 · 7 Jun 2010 at 16:24

I completely forgot about this thread, the actual code and design of the site has changed a bit since I created this thread as well.

vaultingSlinky said:
For your two top logos it would make more sense, and have some SEO benefits if you were to get rid of the top_left and top_right and to do something like this

html

Code:

<div id="header"> <h1><a href="home.html">Name of my site</a></h1> <img src="image/thatisgoing/ontheright" alt="imgalt" /> </div>

Then with the css you want to position the <img> right (through floats, positioning or whatever), apply the logo you want on the left to the <a> tag within the <h1> using the following (or similar) css

Code:

#header img { /*position me!*/ } #header h1 a { display:block; background:transparent url(../images/mylogo.png) center top no-repeat; text-indent:-9999px }

Of course that is assuming the image on top left is going to be some sort of logo/identity for your site where having some text (that is replaced by the logo for all users with css enabled due to the text-indent). If it is simply an image then put it in <img> tags and give the two images in your header div a class like class="left" and class="right" then use

Code:

#header .left { } #header .right { }

Thanks, I've actually changed the design slightly from the OP, the link shows the pretty much finished design so you'll see what each bit actually is.

What I do have a problem with is the navigation bar on the left (in the #topleft div). In IE6/7 and the non current version of Opera it is shifted more to the left and runs over the logo to the right, how would I be able to fix that?

This is the latest code (taken from my Dreamweaver template file):

Code:

<body>
<div id="container">
	<div id="nav">
		<div id="topright">
    	</div>
    	<div id="topleft">
    		<ul id="navlist">
  <li id="home"><a href="index.html"></a></li>
  <li id="prints"><a href="prints.html"></a></li>
  <li id="gallery1"><a href="../gallery/embedded.php"></a></li>
  <li id="location"><a href="locations.html"></a></li>
  <li id="blog"><a href="http://wildaboutlife.net/wp"></a></li>
</ul>
    	</div>
	</div>
	<!-- TemplateBeginEditable name="content" -->
	<div id="container2"></div>
	<!-- TemplateEndEditable -->
	<div id="bottom">
    	<div id="copy"><h3>All images copyright Andrew Pearson 2007-2010.</h3></div>
        <div id="contact"><a href="contact.html"><h3>Contact</h3></a></div>
    </div>
</div>
</body>

And the rather long CSS:

Code:

#container{			/*main container for all content*/
	margin-top:50px;
	width:940px;
	margin:0 auto;
}
#bottom{
	margin-top:20px;
	position:absolute;
	height:25px;
	width:940px;
	background-color:#666666;
}
#copy{
	float:left;
	margin-top:-4px;
	margin-left:5px;
	display: inline;  /* <---Solution for bug IE6 */
}
#contact{
	float:right;
	margin-top:-4px;
	margin-right:5px;
}
#nav{
	height:100px;
	margin-top:25px
}
#topright{
	float:right;
	width:380px;
	height:100px;
	background: url('4.png')
}
#topleft{
	width:550px;
	height:70px;
	position:relative;
	top:30px;
}
/*nav bar with hover function*/
#navlist{
	position:relative;
}
#navlist li{
	margin:0;
	padding:0;
	list-style:none;
	position:absolute;
	top:0;
}
#navlist li, #navlist a{
	height:70px;
	display:block;
}
#home{
	left:0px;
	width:110px;
}
#home{
	background:url('menu-bar.png') 0 0;
}
#home a:hover{
	background: url('menu-bar-hover.png') 0 0;
}
#home a.active{
	background: url('menu-bar-hover.png') 0 0;
}
#prints{
	left:110px;width:110px;
}
#prints{
	background:url('menu-bar.png') 550px 0;
}
#prints a:hover{
	background: url('menu-bar-hover.png') 550px 0;
}
#gallery1{
	left:220px;width:110px;
}
#gallery1{
	background:url('menu-bar.png') 440px 0;
}
#gallery1 a:hover{
	background: url('menu-bar-hover.png') 440px 0;
}
#location{
	left:330px;width:110px;
}
#location{
	background:url('menu-bar.png') 330px 0;
}
#location a:hover{
	background: url('menu-bar-hover.png') 330px 0;
}
#blog{
	left:440px;width:110px;
}
#blog{
	background:url('menu-bar.png') 220px 0;
}
#blog a:hover{
	background: url('menu-bar-hover.png') 220px 0;
}
#container2{			/*container for changeable content*/
	margin-top:10px;
}

Is what you suggested in your previous post still relevant?

SimonUK, it's really easy to learn a bit of HTML and CSS. I have to admit I did learn some a while ago so I could build a basic website (far more basic than what I have just done) however most of it is either learned from scratch over the last two weeks or at least re learned. Have a look at w3schools yeah, it's an excellent site that shows you the basics.

I think learn how divs work and you can build on that. Once you can position things around the page properly (mostly via CSS) the whole site will be a lot easier to make. The asthetics (font style, colours etc) are then really easy to work out and apply.