CSS / Stylesheet question

Page 1 of 1

2 Replies - 628 Views - Last Post: 19 July 2009 - 03:10 PM

#1 tscott  Icon User is offline

  • D.I.C Regular

Reputation: 2
  • View blog
  • Posts: 370
  • Joined: 30-January 09

CSS / Stylesheet question

Posted 19 July 2009 - 12:15 PM

Few questions here as we look at the index file we've got a couple divs #header, #sitebranding, and finally #tagline. Now I'm working with this site and if you notice in my stylesheet I've put the width of #header in the stylesheet to 100% so why does that stretch out the #tagline div is it because we've got a div within a div within a div? I'm just trying to understand how this all works? Also is absolute positioning pretty common for css experts?

INDEX 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" />
<link href="style1.css" rel="stylesheet" type="text/css"/>
<title>Bubble Under   -  The diving club for the south-west UK</title> 
</head>

<body>
<div id="header">
  <div id="sitebranding">
	<h1>BubbleUnder.com</h1>
	</div>
<div id="tagline">
	<p>Diving club for the south-west UK - let's make a splash!</p>
	</div>
</div> 
<! end of header div >
	<div id= "navigation">
	<ul> <! unordered list>
	<li><a href="index.html">Home</a></li>
	<li><a href="about.html">About Us</a></li>
	<li><a href="contact.html">Contact Us</a></li>
	</ul>
	</div> 
<! end of navigation div >
		
		<div id="bodycontent">
			<h2> Welcome to our super - dooper Scuba site </h2>
			<p> <img src= "divers-circle.jpg" width= "200" height= "162" alt= "A circle of divers"/></p>
			<p>Glad you could drop in and share some air with us! You've passed your underwater navigation skills and successfully found your way to the start point - or in this case, our home page.</p>
			<h3>About Us</h3>
			<p><span class="fun"> Bubble Under </span>is a group of diving enthusiasts based in the south-west UK who meet up for diving trips in the summer months when the weather is good and the bacon rolls are flowing.  We arrange weekends away as small groups to cut the costs of accommodation and travel to ensure that everyone gets a trusthworthy dive buddy.</p>
			<p>Although we're based in the south-west, we dont stay on our own turf: past diving weekends away have included trips to Scapa Flow in Scotland and to Malta's numerous wreck sites.</p>
			<p>When we're not diving, we often meet up in a local pub to talk about our recent adventures (any excuse, eh?)</p>
			<h3>Contact Us</h3>
			<p>To find out more, contact Club Secratary 
			<a href="malito:bbalpnoy03@aol.com">Edwin Pangelinan</a></p>
		</div>
</body>
</html>


STYLESHEET CODE
/*
CSS for Bubble Under site
*/

#tagline p {
font-style: italic;
font-family: Georgia, Times, serif;
background-color: #bed8f3;
border-top: 3px solid #7da5d8;
border-bottom: 3px solid #7da5d8;
padding-top: .2em;
padding-bottom: .2em;
padding-left: .8em;
margin: 0;
}

body {
	 font-family: Verdana, Helvetica, Arial, sans-serif;
	 background-color: #e2edff;
	 line-height: 125%;
	 padding: 0;
	 margin: 0;
	 
   }

h1, h2, h3 {
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
}

h1 {
	   font-size: x-large;
	   background-color: navy;
	   color: white;
	   padding-top: 2em;
	   padding-bottom: .2em;
	   padding-left: .4em;
	   margin: 0;
   }

h2 {
color: navy;
font-size: 130%;
font-weight: normal;
padding-top: 15px;
	}
	
li  {
	 font-size: small;
	}
	
p {
font-size: smalll;
color: navy;
   }

em {
text-transform: uppercase;
   }


a {
font-weight: bold;
}

a:link {
color: black;
}

a:visited {
color: navy;
}

a:hover {
text-decoration: none;
color: white;
background-color: navy;
}

a:active {
color: aqua;
background-color: navy;
}
.fun {
font-family: Georgia, Times, serif;
color: #339999;
leter-spacing: 0.05em;
}
#navigation, #bodycontent, #header{
position: absolute;
}
#navigation, #bodycontent {
top: 107px;
}
#bodycontent {
left: 200px;
}
#header {
width: 100%;
}


Is This A Good Question/Topic? 0
  • +

Replies To: CSS / Stylesheet question

#2 Misfit  Icon User is offline

  • D.I.C Head

Reputation: 7
  • View blog
  • Posts: 92
  • Joined: 18-July 09

Re: CSS / Stylesheet question

Posted 19 July 2009 - 01:01 PM

XHTML is a little bit more nitpicky than HTML. If you don't close off an element it will consider that element as ongoing. 

<div style="100%"> <!-- first div -->
  <div style="position: absolute; top: 50; left: 20;"> 
	  <!-- the second div will be absorbed by the first -->
</div></div>


XHTML pointers:
1. pay attention to doctype
2. ALL tags must be closed (img = empty element, but it's still closed)
3. never use upper case in code
(all of these are for future coding, not to misunderstand your coding abilities)

DIV Pointers:
Technically a div is just something that organizes content. You can "wrap' a div like you accidentally did, or you can section it off by closing the element. 

<div class="header">CLOSE ME OFF</div><br /> 
<!-- since you're using a div and not a <h1> you're going to need a <br /> -->

<div class="text">
TEXT HERE TEXT HERE TEXT HERE
</div>


And as for the positioning question - I wouldn't call myself an expert but I've used it in virtually every layout for three years. If you're going to position anything with a top or left (etc.) attribute, you're going to need to specify the positioning value. :D (check w3schools for more info)
Was This Post Helpful? 0
  • +
  • -

#3 neit  Icon User is offline

  • D.I.C Head

Reputation: 15
  • View blog
  • Posts: 187
  • Joined: 13-February 09

Re: CSS / Stylesheet question

Posted 19 July 2009 - 03:10 PM

if you do not want the tagline div to stretch the same length gove it a fixed
width.

the div inside the headers will also stretch 100% unless you
give them fixed widths.

just add width: 300px; to the tagline css. change the width to suit.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1