I am wanting to place 4 Div boxs inside a Div Box, so i can get 2 Div Boxs for 2 headings, and 2 for the body of text.
Here is the main Page that I am working. Here (<!-- m --><a class="postlink" href="http://www.gslc.qld.edu.au/newpage/1/test.htm">http://www.gslc.qld.edu.au/newpage/1/test.htm</a><!-- m -->)
As you can see, I have been trying to get it working, without useing absolute and just telling it where we want it. I want the page to be liquid so that you can resize it from 600x480 till 10000000000x800000000000
heres my HTML code
<div id="bodytext">
<Div id="headerboxleft">Lastest News</Div>
<div id="headerboxright">Upcoming Events</div>
<div id="textleft">Not much</div>
<div id="textright">Even Less</div>
</div>
and heres my CSS
#bodytext {
position:Absolute;
left:20%;
width: 60%;
right:20%;
top:130px;
z-index:0;
border: double;
Bottem:0px;
}
#headerboxleft {
Width:49%;
position:relative;
font-weight: bold;
color: #000000;
background-color: #99CCFF;
left: 0px;
top:0px;
}
#headerboxright {
width:49%;
font-weight: bold;
color: #000000;
background-color: #99CCFF;
position: absolute;
left: 300px;
Top: 0px;
}
#textleft {
position:relative;
left: 0px;
}
#textright {
position:Absolute;
width:49%;
top: 15px;
right:0px;
border: double;
}
Thanks for any help.well, not exactly a CSS commentary, but I think your graphics might be too big for the web use.
also, I think what you are trying to do requires some level of "floating" see my thread on the IE problem that I had a few posts down, and you might get a clue as to how to position stuff better.
and positioning a div inside of a div is called "nesting".Thanks for the help, and I know the pics are too large, right now we are just using dummie images until I can be bothered to go out and get the real ones done.
I am hoping to mkae them alot smaller then whats one there now.
Wofeni'm a graphix guy, and I don't know if this is against TOS/Acceptable use, but I'm happy to do free graphic fixes for you so that you can use them...
e-mail <!-- e --><a href="mailto:[email protected]">[email protected]</a><!-- e -->, don't look at the site, cause it's not ready yet.
no peeking
You need to start by rethinking your HTML structurally. You don't have four divs, you have two, left and right, each one having a heading (e.g. <h2>) followed by paragraphs.
<div id="bodytext">
<div id="latestnews">
<h2>Lastest News</h2>
<p>Not much</p>
</div>
<div id="upcoming">
<h2>Upcoming Events</h2>
<p>Even Less</p>
</div>
</div>It really funny, I completly forgot I can actuly use HTML for something
Umm, using Html to do something, I kinda feel dumb now, making a extar div where a H would of done.
Thanks for reminding me.LOL, yeah, everyone seems to get "divitis" when they first start using CSS. Once I found myself with markup like...
<div id=header>
<h1>Page Title</h1>
</div>
...and I bruised my forehead when I smacked it.Check out Cederholm's book. He's great at minimizing the div- and class-itis.LOL, yeah, everyone seems to get "divitis" when they first start using CSS. Once I found myself with markup like...
HTML Code:
<div id=header>
<h1>Page Title</h1>
</div>
...and I bruised my forehead when I smacked it
Well, i am glad I am not the only one ho has done something like this, And its nice to know people dont laugh when they point it out to you.... well laugh too much that is.
WofenWell, all this converstation has sparked a question for me. You guys mention the divitis and using the html more often. But, when creating a header, isn't bad practice to use inline styling to create the layout. I mean, isn't it bad to use...
<h1 style="border-bottom:1px solid #000, font-weight:normal, etc.">
... within the body of your markup? Isn't that what CSS is there for? I am confused on that one.the style can go in the style atribute, but it's best to minimse it, use it only if you have it belonging to a class and you need each member of the class to be slightly variant.Yes, in general you could say inline styles are bad but there is always a situation that proves the rule. If there's absolutely a single place on a single page where you need an oddball presentation then inline is the way to go.
Here is the main Page that I am working. Here (<!-- m --><a class="postlink" href="http://www.gslc.qld.edu.au/newpage/1/test.htm">http://www.gslc.qld.edu.au/newpage/1/test.htm</a><!-- m -->)
As you can see, I have been trying to get it working, without useing absolute and just telling it where we want it. I want the page to be liquid so that you can resize it from 600x480 till 10000000000x800000000000
heres my HTML code
<div id="bodytext">
<Div id="headerboxleft">Lastest News</Div>
<div id="headerboxright">Upcoming Events</div>
<div id="textleft">Not much</div>
<div id="textright">Even Less</div>
</div>
and heres my CSS
#bodytext {
position:Absolute;
left:20%;
width: 60%;
right:20%;
top:130px;
z-index:0;
border: double;
Bottem:0px;
}
#headerboxleft {
Width:49%;
position:relative;
font-weight: bold;
color: #000000;
background-color: #99CCFF;
left: 0px;
top:0px;
}
#headerboxright {
width:49%;
font-weight: bold;
color: #000000;
background-color: #99CCFF;
position: absolute;
left: 300px;
Top: 0px;
}
#textleft {
position:relative;
left: 0px;
}
#textright {
position:Absolute;
width:49%;
top: 15px;
right:0px;
border: double;
}
Thanks for any help.well, not exactly a CSS commentary, but I think your graphics might be too big for the web use.
also, I think what you are trying to do requires some level of "floating" see my thread on the IE problem that I had a few posts down, and you might get a clue as to how to position stuff better.
and positioning a div inside of a div is called "nesting".Thanks for the help, and I know the pics are too large, right now we are just using dummie images until I can be bothered to go out and get the real ones done.
I am hoping to mkae them alot smaller then whats one there now.
Wofeni'm a graphix guy, and I don't know if this is against TOS/Acceptable use, but I'm happy to do free graphic fixes for you so that you can use them...
e-mail <!-- e --><a href="mailto:[email protected]">[email protected]</a><!-- e -->, don't look at the site, cause it's not ready yet.
no peeking
You need to start by rethinking your HTML structurally. You don't have four divs, you have two, left and right, each one having a heading (e.g. <h2>) followed by paragraphs.<div id="bodytext">
<div id="latestnews">
<h2>Lastest News</h2>
<p>Not much</p>
</div>
<div id="upcoming">
<h2>Upcoming Events</h2>
<p>Even Less</p>
</div>
</div>It really funny, I completly forgot I can actuly use HTML for something
Umm, using Html to do something, I kinda feel dumb now, making a extar div where a H would of done.
Thanks for reminding me.LOL, yeah, everyone seems to get "divitis" when they first start using CSS. Once I found myself with markup like...
<div id=header>
<h1>Page Title</h1>
</div>
...and I bruised my forehead when I smacked it.
Check out Cederholm's book. He's great at minimizing the div- and class-itis.LOL, yeah, everyone seems to get "divitis" when they first start using CSS. Once I found myself with markup like...HTML Code:
<div id=header>
<h1>Page Title</h1>
</div>
...and I bruised my forehead when I smacked it
Well, i am glad I am not the only one ho has done something like this, And its nice to know people dont laugh when they point it out to you.... well laugh too much that is.
WofenWell, all this converstation has sparked a question for me. You guys mention the divitis and using the html more often. But, when creating a header, isn't bad practice to use inline styling to create the layout. I mean, isn't it bad to use...
<h1 style="border-bottom:1px solid #000, font-weight:normal, etc.">
... within the body of your markup? Isn't that what CSS is there for? I am confused on that one.the style can go in the style atribute, but it's best to minimse it, use it only if you have it belonging to a class and you need each member of the class to be slightly variant.Yes, in general you could say inline styles are bad but there is always a situation that proves the rule. If there's absolutely a single place on a single page where you need an oddball presentation then inline is the way to go.