CSS - What Is A General/common Method To Divide A Webpage?

After many attempts I have been unable to get an unordered link list to fill the desired width. The main nav list should be the same width as the boxes in the left column. http://test.solidgroundnc.com/sg_css4.htm

I would also appreciate any and all suggestions regarding my code/design for that same page. I'm not a web designer, not nearly, as my first attempt using tables proves - http://www.solidgroundnc.com. I was flamed so much when asking a question about that one that I decided to learn more, which includes css, and probably enought to get me into more trouble. ;-)

Cheers,
Golem

I've said this before, on he I'm old and trying to ween myself off tables. I'm re-doing a site for a mattress store (I did one for the owner a number of years ago) and I absolutely want to ditch the archaic code.... But, I've got a very basic question about laying things out with CSS - and I'm going to post a picture because - I think - it may explain my question best. In short, I have a DIV that's centered in the middle of the page called "container". It has a javascript slider at the top, that kinda fills the area in terms of width, and below it I want two columns. I have no idea - using strict CSS and no tables - how this would be done. I mean, I suppose you could use DIVs and absolute positioning but it seems like that might cause problems - I mean, heck...I don't know - maybe not. I just want to know what the best approach would be. Here's a graphic:



I don't think it matters, but you can see the whole page (and examine the code), here (just a parking spot on my own server):

http://www.guymerritt.net/xdog2/

Any help - as always - would be greatly appreciated.

Hello -
My name is Steve Douglas website designer for AAA Northwest Ohio. I'm 19, and learning as I go - AAA paying for any courses that I need to take, but i'm not the school type of guy. I like to learn it by self-studying; i learn it better by making my own mistakes.

Anyways were doing a site re-design, I first started off with a simple re-design with just HTML and tables (whoopity doo), boss was impressed - I was not. I hated it.

But - I'm doing a new site design now with CSS, learned how to code it overnight. I started the designing and had wierd errors all around with browser related issues, I would re-design, re-design, and re-design until everything worked Perfect in all Screen Resolutions, IE 5.0, IE 6.0, IE 7.0, and Firefox

I got advice from a fellow devshed guy kasmatu (spelling could be off), but helpful guy, gave me the clue to get the Mozilla Firefox Extension for CSS [Love It!].

Now should I follow these tools by heart? I mean like if I click Tools then Validate CSS, and Validate HTML, and Etc.

1. I am at a state where my header finally looks great in all popular browsers, but when I validate my CSS it's saying i'm missing a </div> at line 40 - Which is True! but when I go to add it, um, yea doesn't like that - all ID's are totally screwed from there after. not even the header looks right. And it doesn't look like a simple fix.

I mean it's working! - So why should I want to validate my CSS?

ALSO - and this is prolly why.. How do I speed up the site? Our Current site that we are using, is running 98 seconds loading time for Dialup users (a minute an a half!). The new CSS is at 45 seconds for Dialup users (i think).

I'm pretty sure it's to do with all the Javascripts i'm using, I'm planning on combining the Scripts together and taken out code I do not need. But the document sizes are still huge.

---------
I'm looking into HTTP Compression for our server - is this smart? we are running on a windows 2000 server IIS - What are the negatives to installing the compresser?
----------

Here is the site re-design
http://www.aaanwohio.com/test/together.php

Our Current Site is located at
http://www.aaa.com/stop - Zip Code 43465

I am having what I can only imagine is a very common problem.
Firefox is working fine and IE is not.

I want the logo then the name image next to it in the header.

I am positioning with css as below:

Code:

<div id="header">
     <div class="logoholder">
         <img src="images/logo70.jpg"/>
         <img class="djembefola" src="images/djembefolaheader.jpg">
     </div>
</div>

and the css:
Code:

.logoholder {
    position:absolute;
    left : 20px;
    top : 0px;
    width:500px;
    height:70px;
}
#header img {
    float: left;
}
#header img.djembefola {
    float: none;
}

I am aware that this CSS may be very weak, as I'm not too experienced and am coding by hand. What would a robust way of doing this be. I don't really like this float lark but it was necessary to get the logo to stick left.

Is it a good idea to have it inside the logoholder div (albeit bad naming by me) or is it unnecessary?

Sorry I just realised that I didn't link to the page I had intended to.... www.djembefola.net

Thanks for your time and consideration!

Okay, I'm trying to create dynamically sized blocks that can be pretty much and width and height, while maintaining these fancy corners I'm using. If you look closely, each of the corners have a little inner curve in them... Here is how I did it in HTML/CSS....

1. I spliced it up so there is an image for each of the four corners (10x10), two background images for the top and bottom bars (1x10) and two background images for the left and right bars (10x1).

2. Created the structu
[html]
<div class="block-top">
<div class="block-tl"></div>
<div class="block-tr"></div>
</div>
<div class="block-content">
<div class="block-ml">
<div class="block-mr">
<div class="block-center">
<p>this is some content</p>
</div>
</div>
</div>
</div>
<div class="block-bottom">
<div class="block-bl"></div>
<div class="block-br"></div>
</div>
[/html]

3. Created the CSS
[css]
.block-top, .block-bottom {
height:10px;
line-height:0;
font-size:0;
}
.block-tl, .block-bl {
float:left;
height:10px;
width:10px;
line-height:0;
font-size:0;
}
.block-tr, .block-br {
float:right;
height:10px;
width:10px;
line-height:0;
font-size:0;
}
.block-center {
padding:0 10px;
background-color:red;
}
.block-content {
clear:both;
}

.block-top {
background-image:url(../images/block-light-TM.jpg);
}
.block-tl {
background-image:url(../images/block-light-TL.jpg);
}
.block-tr {
background-image:url(../images/block-light-TR.jpg);
}
.block-ml {
background-image:url(../images/block-light-ML.jpg);
background-repeat:repeat-y;
background-position:left;
}
.block-mr {
background-image:url(../images/block-light-MR.jpg);
background-repeat:repeat-y;
background-position:right;
}
.block-bottom {
background-image:url(../images/block-light-BM.jpg);
}
.block-bl {
background-image:url(../images/block-light-BL.jpg);
}
.block-br {
background-image:url(../images/block-light-BR.jpg);
}
[/css]

In all browsers except IE6 it displays fine, except for one little problem. If I put anything in the content area that has a margin, the margin puts spacing above and below the whole block-content area for some reason. I don't understand that at all, because the margin'ed element is within all those nested divs. I thought it should then just expand that inside div to fit?? Nope...

In IE6 the ML and MR backgrounds don't appear at all.

What am I dong wrong here? Hope this wasn't too complicated to understand.

NOTE: I have zero padding and margin on all the elements as well.

I tweaked a style sheet (changed some margins, colors, etc.) and uploaded it to my server, but sometimes they just don't show up. I've deleted the old style sheet first, cleared my cache and tried different browsers - even restarted my computer. When I download the style sheet and look at it, it's the correct one but it just won't display my changes. It's almost like the server is referring to my old one.

Anyone else have this problem or know how I can fix it? I'm going a little crazy...

I have a navigation bar. The desired behaviour is such that when a user mouses over (or out) of a button, its appearance changes. The appearance and change is being set by css (let's say background-color and background-image to make things simple).

My question is this: On the mouseover and mouseout events, is it better to use javascript to manipulate these css properties directly or to use javascript to assign a new className to the button's container?

Ex.

Code:

document.getElementById("button1").style.background-color = newColor;

vs

Code:

document.getElementById("button1").className = newClassName

In the latter, "newClassName" would obviously reference an alternate css style where the "newColor" would be defined

hi every one i am kind of new to this i am making a website but how do you put css on you webpage i am using web page maker

and i want to put a table on my website
just take a look at tothegame.com and see their table for games and stuff
and i also want to use the search function and the filter and the abcdfg function how do i get or where do i get that kind of tables for my website its amovie site and i want to use that as a list for my movies that people can choose and filter by name or released date

hope that ssomebody can help me out

thanks

Very cool new method, definitely worth a look.

http://somerandomdude.net/projects/webdev/divless/

Enjoy.

I have a client who wants HTML emails (I know... I know...). I'm just curious what type of CSS works the best with the most email readers out there. I really don't want to go back to tables, <font>, <center>, etc...

Obvious choices are an external stylesheet linked to in the <head>. Downfall for that is if they aren't connected it may not load? Or I can do an internal sheet in the <head> or just use inline styles in each <div>, <p>, etc.

What are recommendations? I imagine the client is using Outlook or OE, but I haven't asked.

---John Holmes...

hi

I'm wanting to create the same background as this:

http://www.designdetector.com/demos/css-gradients-demo-1.php

(0,191,255 and 255,255,255)

It looks like it uses a variety of div tags to create the gradient.

But then it's kind of hard to put things over the top of the gradient.

So what's the best way to create that gradient above as a background (NOT fixed)?

cheers
nathan

Hey guys so I'm trying to create a bar at the top of my webpage, except the left and right sides are different than the middle.

So I thought I'd approach this by dividing up the webpage into three sections, left middle and right.

Code:

body { background-color:#B7E7F9; }
 /*Big Wrap*/ 
#mainwrap{ margin-top:0px; height: 100%; width: 100%; } 
/*Left Side*/ 
#leftwrap{ align: left; background:url(images/Left_Top_Bar.jpg) no-repeat; } 
/*Right Side*/
 #rightwrap{ align: left; background:url(images/Right_Top_Bar.jpg) no-repeat; } /*Header*/
 #header{ background:url(images/Top_Bar_Part.jpg) repeat-x; }

I then implemented it in 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>My Webpage</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> 
<body> 
    <div id="mainwrap"> 
        <div id="leftwrap"></div>
        <div id="header"></div>
        <div id="rightwrap"></div>
    </div> 
</body>
</html>

Now when I open the html file in a browser, all I see is the background color that I put in for body, but none of my wraps seem to be displaying. I was also wondering if there was an easier way to do this.

The header is just a simple rounded rectangle that is running across the entire top. I want the same rounded rectangle look for all users regardless of resolution.

Thank you for your help,
Popnbrown

I am trying to make a 3 column web page. I have the middle column, but when I add the code below for the left and right columns, nothing shows up. Is this the wrong code? Do I need to wrap them in certain tags? Thanks for your help!
Website: www.freewebs.com/weareamazing


Code:

#sidebar-a {
			float: left;
			width: ;
			margin: 0;
			margin-right: ;
			padding: 5px;
			background-color: white;
		}

		#sidebar-b {
			float: right;
			width: ;
			margin: 0;
			margin-left: ;
			padding: 5px;
			background-color: white;
		}

hello guys,

I am creating a webpage using CSS for my layout. when I look at the page, it seems ok but all my "DIV" are positoned relative to the left side of the screen. so if you maximize the screen, you get a huge space on the far right side of the screen. I was wondering if there is anyway I can centre the page in the window no matter the size of the screen. I have provided a link to a version of the page and the CSS file is included here. each id represents a DIV in the design.

http://www.radien.plus.com/test.html

thanks guys

Code:

#Logo
{
    Margin : 0;
    Padding : 0;
    Width : 125px;
    Height : 125px;
    Border-color : aqua;
    Border-top-width : medium;
    Border-right-width : medium;
    Border-bottom-width : medium;
    Border-left-width : medium;
    Border-top : 1px solid#00;
    Border-bottom : 1px solid#00;
    Border : 1px solid#00;
    Border-left : 1px solid#00;
    Border-right : 1px solid#00;
}
#news
{
    Font-family : Arial , Helvetica , Sans Serif;
    Font-size : 80%;
    Font-weight : normal;
    Margin : 0;
    Border-top-width : medium;
    Border-right-width : medium;
    Border-bottom-width : medium;
    Border-left-width : medium;
    Width : 150px;
    Height : 250px;
    position : absolute;
    top : 140px;
    Padding : 3;
    Margin-top : 0;
    Text-indent : 3px;
    Border-top : 1px solid#00;
    Border-right : 1px solid#00;
    Border : 1px solid#00;
    Border-left : 1px solid#00;
    Border-bottom : 1px solid#00;
}

#Products
{
    Font-family : Arial , Helvetica , Sans Serif;
    Font-size : 80%;
    Font-weight : normal;
    Margin : 0;
    Border-top-width : medium;
    Border-right-width : medium;
    Border-bottom-width : medium;
    Border-left-width : medium;
    Width : 150px;
    Height : 200px;
    position : absolute;
    top : 397px;
    Padding : 3;
    Margin-top : 0;
    Text-indent : 3px;
    Border-top : 1px solid#00;
    Border-right : 1px solid#00;
    Border : 1px solid#00;
    Border-left : 1px solid#00;
    Border-bottom : 1px solid#00;
}

#unknown
{
    Font-family : Arial , Helvetica , Sans Serif;
    Font-size : 80%;
    Font-weight : normal;
    Margin : 0;
    Border-top-width : medium;
    Border-right-width : medium;
    Border-bottom-width : medium;
    Border-left-width : medium;
    Width : 150px;
    Height :150px;
    position : absolute;
    top : 605px;
    Padding : 3;
    Margin-top : 0;
    Text-indent : 3px;
    Border-top : 1px solid#00;
    Border-right : 1px solid#00;
    Border : 1px solid#00;
    Border-left : 1px solid#00;
    Border-bottom : 1px solid#00;
}

#banner
{
    Font-family : Arial , Helvetica , Sans Serif;
    Font-size : 80%;
    Font-weight : normal;
    Margin : 0;
    Border-top-width : medium;
    Border-right-width : medium;
    Border-bottom-width : medium;
    Border-left-width : medium;
    Width : 604px;
    Height : 125px;
    position : absolute;
    left : 140px;
    Padding : 3;
    Margin-top : 0;
    Text-indent : 3px;
    Border-top : 1px solid#00;
    Border-right : 1px solid#00;
    Border : 1px solid#00;
    Border-left : 1px solid#00;
    Border-bottom : 1px solid#00;
}

#shopping
{
    Font-family : Arial , Helvetica , Sans Serif;
    Font-size : 80%;
    Font-weight : normal;
    Margin : 0;
    Border-top-width : medium;
    Border-right-width : medium;
    Border-bottom-width : medium;
    Border-left-width : medium;
    Width : 125px;
    Height : 125px;
    position : absolute;
    top : 7px;
    left : 750px;
    Padding : 3;
    Margin-top : 0;
    Text-indent : 3px;
    Border-top : 1px solid#00;
    Border-right : 1px solid#00;
    Border : 1px solid#00;
    Border-left : 1px solid#00;
    Border-bottom : 1px solid#00;
}

#search
{
    Font-family : Arial , Helvetica , Sans Serif;
    Font-size : 80%;
    Font-weight : normal;
    Margin : 0;
    Border-top-width : medium;
    Border-right-width : medium;
    Border-bottom-width : medium;
    Border-left-width : medium;
    Width : 150px;
    Height : 90px;
    position : absolute;
    top : 140px;
    left : 725px;
    Padding : 0;
    Text-indent : 3px;
    Border-top : 1px solid#00;
    Border-right : 1px solid#00;
    Border : 1px solid#00;
    Border-left : 1px solid#00;
    Border-bottom : 1px solid#00;
}

#poll
{
    Font-family : Arial , Helvetica , Sans Serif;
    Font-size : 80%;
    Font-weight : normal;
    Margin : 0;
    Border-top-width : medium;
    Border-right-width : medium;
    Border-bottom-width : medium;
    Border-left-width : medium;
    Width : 150px;
    Height : 210px;
    position : absolute;
    top : 238px;
    left : 725px;
    Padding : 3;
    Margin-top : 0;
    Text-indent : 3px;
    Border-top : 1px solid#00;
    Border-right : 1px solid#00;
    Border : 1px solid#00;
    Border-left : 1px solid#00;
    Border-bottom : 1px solid#00;
}

#footer
{
    Font-family : Arial , Helvetica , Sans Serif;
    Font-size : 80%;
    Font-weight : normal;
    Margin : 0;
    Border-top-width : medium;
    Border-right-width : medium;
    Border-bottom-width : medium;
    Border-left-width : medium;
    Width : 150px;
    Height : 210px;
    position : absolute;
    top : 238px;
    left : 725px;
    Padding : 3;
    Margin-top : 0;
    Text-indent : 3px;
    Border-top : 1px solid#00;
    Border-right : 1px solid#00;
    Border : 1px solid#00;
    Border-left : 1px solid#00;
    Border-bottom : 1px solid#00;
}