[RESOLVED] DIV and CSS

[CreativeMind]

Hi all!

Anyone have a good example of a website that was created with DIV tags and using an external style sheet? And can is good for browsers such as , IE6, IE7, Firefox and Safari?

Is it posible to create a website with DIV tags with an external style sheet to control text, background images (body & tables), roll over buttons and etc...

It would be great if someone can attache an external style sheet and an HTML page so I can see the full detail on how to control all the contents within the HTML page. You can attache the HTML in a source code within Notepad is great as well.

Also, can you use an external style sheet to control a Flash content, more like positioning the flash movie?

Thanks in advance!!

[Centauri]

There are MANY sites out there built this way that are fine cross-browser, and semantic markup with external style sheets should be the way to do things. You can check out any such site by viewing the source code and css files to see how they work - viewing the css is easier if you have the Firefox Web Developer Toolbar extension, recommending for those developing sites.

Check out Stu Nichols' site (http://www.cssplay.co.uk/) and Paul O'Brien's site (http://www.pmob.co.uk/) for good examples and many css ideas and solutions.

My own site, and those linked from it, in my sig, are also built this way - feel free to view the coding to see how they work.

[CreativeMind]

Thanks Centauri!

Wow, I looked at your website and looks cool! it looks like you did not even use a Table, TR and TD. However, you did use the "p" element for text.

I do have a questions regarding your rollover buttons within your style sheet. I understand the id="Nav" and from there, I am confused. I will look into more and see if it still make sense to me.




Thanks again my friend!!

[CreativeMind]

Hi Centauri or anyone,

Can you control Flash movie contents within the external style sheet like you would with a background image?

Thanks!

[ray326]

http://csszengarden.com

[Centauri]

Writing a web page is all about starting with semantic content - the html should describe the page using appropriate html elements. As text is usually presented as paragraph blocks, then it is enclosed with <p> tags, and likewise headings should use <h>. Menus are essentially lists of links, so they can be marked up as unordered lists (<ul>s). Divs are semantically neutral, but can be used to group like content and for attaching styling to, and only need to be used where necessary. All of the visual look can be completely controlled via the css, including image rollover effects. You can't control flash contents with css, but you can certainly control the positioning of it - this is made much easier if you use the swfobject script to embed it.

[sound-stream]

I found a site but it doesn't use just divs o well you judge it (sorry but all aligns off on ie6 still works tho) http://sound-stream.zzl.org

[Centauri]

o well you judge it

Not sure what that has to do with this thread, but that site is suffering from divitis (too many unnecessary divs), positioning all over the place depending on screen size, a menu that doesn't work properly, and quirks mode for IE - needs a rethink....

[CreativeMind]

Hi Centauri, thanks for the input about Flash. I have a question regarding applying a background image. The background image I applied is off center to the right side of the screen. Also, there is a huge scroll bar at the bottom of the screen. Here is what I did in external style sheet:

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
background-image: url(Background.gif);
background-position: center;
background-repeat: repeat-y;
position: relative;

}




I added the "background-position: center;" but still off centered. I have attached a zip file for you to look at.

Thanks!!

[Centauri]

Background is centred fine for me, and no scroll bar - no problems with that I can see.

[CreativeMind]

Centauri, I am testing on IE7 but the Firefox is center. Maybe it's just IE7.

Thanks!

[Centauri]

Had a look in IE7 and could see the problem. I hadn't noticed a syntax error of a missing quote and closing bracket on the mailto link, which was causing IE7 some grief, pushing the site wide :<a href="mailto:info@c"></a>


Edit: WTF??? - why does this forum's code tags change a coded &#code to the actual character????

[CreativeMind]

Thanks Centauri!

I am trying to lay text over a an image. I tried to add the image which works fine but I just can't get the image to go underneath the text. I used the "z-index: 3px;" but it does nothing.

Here is the external style sheet:

#bg1 {

width: 380px;
padding-left: 630px;
padding-top: 50px;
padding-bottom: 30px;
z-index: 3px;


}



Here is the HTML:


<div id="footer">

<p>DIV and CSS</p>

</div>


<div id="bg1">

<img src="button_dates_roll.gif">

</div>


Thanks!

[CreativeMind]

I have attached a zip file for you to look at. I am trying to learn how to apply simple text over a background image. I already applied the background image for the body but this is over the body.

I am trying to put the text "DIV and CSS" of the bottom footer over the background image.

Thanks!!

[Centauri]

First of all, if the body background is centered and you want the content of the site positioned within the central area of this, just applying padding to the left of everything to space it away from the edge of the screen won't work, as screen widths can vary - on my 19" monitor the text is on the right hand side. What you have to do is wrap everything in a div (best called "wrapper") to constrain all the content within its width (around 800px looks right) and centre that :#wrapper {
width: 800px;
margin: 0 auto;
}
then you can get rid of all the left paddings and everything will stay central to the screen.

Can you provide a picture of what you want to acheive with the footer graphic? - the image would best be applied as a background to an element (possibly the footer div itself), but not entirely sure of the structure or purpose at the moment.

[CreativeMind]

Hi Centauri,

I have attached a zip file and tried to do what you've told me. I am not sure I did exactly what you said but take a look at my zip file. There is an image in the zip file that I am trying to use it as a background image.

Also, the background image within the body still seems off center to the right. I have already taken out the email link but still off center. There is still a scroll bar at the bottom but not as long as it did. I think I am on the right track regarding the background image within the <body> tag.

Thanks!!

[CreativeMind]

Centauri, never mind about the background image within the <body> tag. I had too many width styles within the external style sheet. I took all of them out and the background image is center perfectly.

I just need help on getting the smaller background image to center underneath the text "DIV and CSS" at the bottom footer. For some reason, it's not showing up at all.

Since, I made some changes within the external style sheet. I have created another zip file for you to look at.

Thanks!

[Centauri]

First off, there is a syntax error with the image file - the extension is "jpg" not "jpeg". Still not sure what you are after here - the heights on html and body would suggest you want a minimum 100% height layout. I had a play and changed a few things - see if this is more what you are looking for.
html:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>DIV and External Style Sheet</title>
<link href="Std.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>DIV and External Style Sheet</h1>
<p>A great way to speed up!</p>
</div>
<div id="list">
<ul>
<li id="nav-home"><a href="index.html"><span>Home</span></a></li>
<li id="nav-design"><a href="design.html"><span>Site Design</span></a></li>
<li id="nav-host"><a href="hosting.html"><span>Hosting</span></a></li>
<li id="nav-port"><a href="portfolio.html"><span>Portfolio</span></a></li>
<li id="nav-contact"><a href="contact.html"><span>Contact</span></a></li>
</ul>
</div>
<div id="content">
<p>Improve work process! </p>
<p>Simple to make changes!</p>
<p>Extremely easy to manage!</p>
<p>A top notch performer!</p>
<p>Improve work process!</p>
<div id="header2">
<h2>DIV and CSS </h2>
<p>Improve work process! - Simple to make changes! - Extremely easy to manage! - A top notch performer!</p>
<p>Improve work process! - Simple to make changes! - Extremely easy to manage! - A top notch performer!</p>
</div>
</div>
</div>
<div id="footer">
<p>DIV and CSS</p>
</div>
</body>
</html>

css:* {
border: 0;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
background-image: url(Background.gif);
background-position: center;
background-repeat: repeat-y;
position: relative;
}
p {
margin-bottom: 1em;
}
#wrapper {
width: 800px;
margin: 0 auto;
min-height: 100%;
}
* html #wrapper {
height: 100%;
}
#header {
height: 115px;
padding-top: 50px;
text-align: center;
}
#header h1 {
font-size: 20px;
color: #BD8538;
}
#header p {
font-size: 12px;
color: #ffffff;
}
#header2 h2 {
font-size: 15px;
color: #BD8538;
height: 25px;
padding-top: 10px;
text-align: center;
}
#header2 p {
font-size: 12px;
color: #ffffff;
text-align: center;
}
#list {
font-size: 12px;
color: #000000;
width: 120px;
float: left;
padding: 15px;

}
#content {
font-size: 12px;
color: #ffffff;
text-align: center;
padding-bottom: 195px;
margin-left: 150px;
}
#footer {
padding-top: 50px;
background-image: url(background_image.jpg);
background-position: center;
background-repeat: no-repeat;
height: 145px;
width: 800px;
margin: -195px auto 0;
}
#footer p{
font-size: 12px;
color: #ffffff;
text-align: center;
}

[CreativeMind]

Centauri!

You did it my friend!!!

It is exactly what I was trying to do!!!

I usually use Dreamweaver to do my work but I wanted to try something different by using DIV and external style sheet.

Thanks again my friend!!!

[Centauri]

I usually use Dreamweaver to do my work but I wanted to try something different by using DIV and external style sheet.

I also use Dreamweaver, and the above was done using it. The trick with Dreamweaver is to NOT use the design view window to insert or place elements, but use it as a reference for what you are doing (but always constantly preview in browsers as you are developing, as the design view rendering is often not accurate). Do most of your work in the code view window writing code (elements on the toolbars may also be inserted in the code view). I usually use split mode where I can keep an eye on what is happening.

[CreativeMind]

Centauri, good advice because I could not see what I was doing anymore. I basically only use the CODE view now. The Design view looks awful!! Nothing makes since and it's like I am driving my car around blind.

Hopefully Adobe or Macromedia will produce a new version that will enable DIV tags and we can all see what the heck we are doing!!

The design has been much easier and much quicker for me to create a website. Using <table> and <tr> has never been easier when using Dreamweaver.

[Centauri]

What version of Dreamweaver do you have ? I use version 8 and have gotten used to the rendering flaws in its design view. CS3 is better in this respect, but still does not render the same as a browser. I find the design view window, due to its outlining, useful for making sure I am working on the correct element, and to check if styling is being applied to the correct element, but I always continually preview in at least two or three browsers each step of the way - you catch any problems earlier that way.