div's and css and such

radar · August 3, 2010

I was unsure whether to post this here, or in the css forum as it kinda deals with both.

I have been a table user for years and years, though with my new found knowledge and fondess of javascript and ajax I figured why not give the div a try. So i started looking at commands for the div's and such and began my template making.

here is my html 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>{pgtitle}</title>

<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div style="height:100%; width: 100%;">
<div class="cities" id="cities"></div>
<div class="header" id="header">
    	<div class="logo" id="logo"></div>
        <div class="subscribe" id="subscribe">subscribe</div>
  </div>
    <div>content stuff or something or other.</div>
</div>
</body>
</html>
[code]

as you can see its quite small at the moment./  My issue is the logo div needs to be centered, and the subscribe div needs to be displayed directly to the left of that.  i've made it work on my screen but i'm unsure if its the correct way to get it done...

here is my css code:

[code]
body {
background-color: #323c92;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}

.header{
background-repeat:repeat-x;
width: 100%; 
height: 163px;
margin: 0 auto;
background-image:url(images/header_bg.jpg);
font-family: Arial, Helvetica, sans-serif;
}
.logo{
left: 50%;
background-repeat:no-repeat;
width: 678px;
height: 114.81px;
vertical-align:middle;
margin:0 auto;
background-image:url(images/logo.jpg);
font-family: Arial, Helvetica, sans-serif;
}
.subscribe{
position: absolute;
left: 73%;
top: 0px;
width: 30px;
height: 10px;
font-family: Arial, Helvetica, sans-serif;
}
.cities{
display: none;	
}

body {
background-color: #323c92;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}

.header{
background-repeat:repeat-x;
width: 100%; 
height: 163px;
margin: 0 auto;
background-image:url(images/header_bg.jpg);
font-family: Arial, Helvetica, sans-serif;
}
.logo{
left: 50%;
background-repeat:no-repeat;
width: 678px;
height: 114.81px;
vertical-align:middle;
margin:0 auto;
background-image:url(images/logo.jpg);
font-family: Arial, Helvetica, sans-serif;
}
.subscribe{
position: absolute;
left: 73%;
top: 0px;
width: 30px;
height: 10px;
font-family: Arial, Helvetica, sans-serif;
}
.cities{
display: none;	
}

am i doing something wrong, or how should i do this?

once i get thhis figured out, i've also got to figure out how to get 5-6 div's to show up under these 2 for my navigation. all side by side.. i figure to do it this way, as each div will have some navigation links in it, which will call my ajax but will also call a javascript rollover to change the div background-image.

any help appreciated.

arbitter · August 4, 2010

You have a body{} in your css sheet, yet you still use <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">. You can integrate that in the css sheet.

Also, you use:

<div class="header" id="header">

class'es and id's are not the same. In your css script you have written classes. Classes are written like this:

.first
{
color:red;
}

id's are written as:

#first
{
color:red;
}

ID's can only be used once in a script, but classes can be used dozens of times.

You used the class-notation, so no need to also say "id='...'".

I don't really understand what your question is though.

radar · August 4, 2010

Well my question in essence was how to get 2 div's particularly

<div class="subscribe" id="subscribe">subscribe</div>

so show up in IE/FF/ETC side by side instead of one on top of the other... sorta like forcing them to behave as tables...

For those two I ended up going with the code I had, except changing the position to relative instead of absolute. That helped that.

Then for the actual navigation I ended up just using a table for that, as none of the things i found for making your div's act like a table seemed to work. so figured since i want table functionality, lets use a table.

Sign In

div's and css and such

Recommended Posts

radar

Link to comment

Share on other sites

arbitter

Link to comment

Share on other sites

radar

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information