Help with HTML and CSS...

Amp34

Amp34

Amp34

Caporegime
Joined
25 Jul 2005
Posts
28,851
Location
Canada
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...

sitelayoutg.jpg


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 :)
 
You need # in front of your IDs in the css.
You can't have spaces in your ID names.
 
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?
 
Last edited:
The code common to each #cont div can be used in a grouping.

So...
Code: 
#cont1, #cont2, #cont3, #cont4 {
width: 220px; 
height: 240px; 
background-color:#666;
}
then the float, position, left and top values can be left where they are. :)
 
MarcLister said:
The code common to each #cont div can be used in a grouping.

So...
Code: 
#cont1, #cont2, #cont3, #cont4 {
width: 220px; 
height: 240px; 
background-color:#666;
}
then the float, position, left and top values can be left where they are. :)
Click to expand...

Candidate for a class there I'd say.
 
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.
 
Last edited:
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. :)
 
Last edited:
Sorry to butt in!

I've only ever used WYSIWYG software, and am in awe of your site and all site's built properly with HTML, CSS etc. Is it as hard to learn, as all the coding looks ?

My pathetic attempts are here > htt://www.sedwards.me.uk & http://pchelp.sedwards.me.uk using Serif Webplus X2. Very basic. Both are a work in progress due to the lack of imagination lol. General fedback would be appreciated!

Great pictures btw Amp.

Thanks

Simon
 
Last edited:
(x)HTML and CSS are both very easy to learn and use and if you'd like to give it a go, there are lots of resources online. On top of that, this section of OCUK is generally full of people who are happy and willing to help if you run into problems or have any questions.

Now, I say they're both easy to learn and while I think it's quite reasonable to expect someone just learning to be able to build a basic website after only a couple hours study, CSS Mastery will take a considerable longer amount of time.

Also for the first while, you'll find yourself spending a VERY VERY large amount of time just getting everything to look the same, or near enough in all the major browsers (IE6, IE7, IE8, FF, Chrome, Safari and Opera on Windows and FF and Safari on Mac)

When I first moved from building websites as a hobby to getting a job as a Freelance Junior Front End Developer, if it took me 6 hours to put together an html/css template, it would take me an addition 2 hours to get it to look the same cross browser and then an additional 4 hours to get it to look the same in IE6.

3.5 years later and I don't even need to check my work in anything other than FF as I just know it'll look the same in everything else, including IE6 (obviously I do still check all my work though, would be silly not to).
 
Last edited:
Tripnologist said:
(x)HTML and CSS are both very easy to learn and use and if you'd like to give it a go, there are lots of resources online. On top of that, this section of OCUK is generally full of people who are happy and willing to help if you run into problems or have any questions.

Now, I say they're both easy to learn and while I think it's quite reasonable to expect someone just learning to be able to build a basic website after only a couple hours study, CSS Mastery will take a considerable longer amount of time.

Also for the first while, you'll find yourself spending a VERY VERY large amount of time just getting everything to look the same, or near enough in all the major browsers (IE6, IE7, IE8, FF, Chrome, Safari and Opera on Windows and FF and Safari on Mac)

When I first moved from building websites as a hobby to getting a job as a Freelance Junior Front End Developer, if it took me 6 hours to put together an html/css template, it would take me an addition 2 hours to get it to look the same cross browser and then an additional 4 hours to get it to look the same in IE6.

3.5 years later and I don't even need to check my work in anything other than FF as I just know it'll look the same in everything else, including IE6 (obviously I do still check all my work though, would be silly not to).
Click to expand...

Thanks very much for your reply Tripnologist, I have found www.3schools.com which looks very good, but still looks rather daunting, i think you may have an higher IQ than me lol. But i'll try and have a go of the basics @ some point

8 total hours sounds like a lot of work involved for one template!

Did you have any opinion on my site's content ?
 
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 {
}
Click to expand...

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. :)
 
Last edited:
You must log in or register to reply here.
Back
Top Bottom