| Author |
Need help clearing this div.
|
|
| FuzzyLogik 2006-11-19, 7:35 pm |
| <div id="bottomlinks">
<h3>Get Info On</h3>
<ul>
<li><a href="#">Search Engine Optimization</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">HTML / XHTML</a></li>
<li><a href="#">AJAX</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Print Design</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">Google Adwords</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">RSS</a></li>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Dreamweaver</a></li>
<li><a href="#">Hosting</a></li>
</ul>
</div>
I need to clear this div,
I saw one usage of <br /> after the last <li> with a clear applied to
it, but I would rather not use structural markup for this.
| |
| dorayme 2006-11-19, 7:35 pm |
| In article
<1163289053.215175.177410@b28g2000cwb.googlegroups.com>,
"FuzzyLogik" <tawxic@XXXXXXXXXX> wrote:
> <div id="bottomlinks">
> <h3>Get Info On</h3>
> <ul>
> <li><a href="#">Search Engine Optimization</a></li>
> <li><a href="#">CSS</a></li>
> <li><a href="#">HTML / XHTML</a></li>
> <li><a href="#">AJAX</a></li>
> <li><a href="#">Web Design</a></li>
> <li><a href="#">Graphic Design</a></li>
> <li><a href="#">Print Design</a></li>
> <li><a href="#">Illustration</a></li>
> <li><a href="#">Google Adwords</a></li>
> <li><a href="#">Javascript</a></li>
> <li><a href="#">RSS</a></li>
> <li><a href="#">Photoshop</a></li>
> <li><a href="#">Dreamweaver</a></li>
> <li><a href="#">Hosting</a></li>
> </ul>
> </div>
>
>
> I need to clear this div,
>
> I saw one usage of <br /> after the last <li> with a clear applied to
> it, but I would rather not use structural markup for this.
You need to be posting some urls... ;-) What do you mean clear
this div? Do you mean you want to go on under neath it? Just have
another div, it is automatic. Not enough space? OK, make the next
div with a bigger top margin. Or this div with a bigger bottom
margin. Floating bottomlinks somehow and want the next to clear
it? Use clear:both (that will get it) on the next...
--
dorayme
| |
| FuzzyLogik 2006-11-19, 7:35 pm |
|
dorayme wrote:
> In article
> <1163289053.215175.177410@b28g2000cwb.googlegroups.com>,
> "FuzzyLogik" <tawxic@XXXXXXXXXX> wrote:
>
>
> You need to be posting some urls... ;-) What do you mean clear
> this div? Do you mean you want to go on under neath it? Just have
> another div, it is automatic. Not enough space? OK, make the next
> div with a bigger top margin. Or this div with a bigger bottom
> margin. Floating bottomlinks somehow and want the next to clear
> it? Use clear:both (that will get it) on the next...
>
> --
> dorayme
sorry :)
http://www.phazm.net/newphazm/
| |
| dorayme 2006-11-19, 7:35 pm |
| In article
<1163292938.492511.125570@i42g2000cwa.googlegroups.com>,
"FuzzyLogik" <tawxic@XXXXXXXXXX> wrote:
> dorayme wrote:
>
> sorry :)
>
> http://www.phazm.net/newphazm/
You could try moving the very last </div> up to above the opening
of the "bottomlinks" div...
--
dorayme
| |
| FuzzyLogik 2006-11-19, 7:35 pm |
|
dorayme wrote:
> In article
> <1163292938.492511.125570@i42g2000cwa.googlegroups.com>,
> "FuzzyLogik" <tawxic@XXXXXXXXXX> wrote:
>
>
> You could try moving the very last </div> up to above the opening
> of the "bottomlinks" div...
>
> --
> dorayme
That's not the result I want, though.
http://www.phazm.net/newphazm/index.gif
| |
| John Hosking 2006-11-19, 7:35 pm |
| FuzzyLogik wrote:
> dorayme wrote:
>
[exchange snipped]
[color=darkred]
>
> That's not the result I want, though.
>
> http://www.phazm.net/newphazm/index.gif
>
I'm still not real clear on what you want to do. Does it help you near
your goal if you do this:
#bottomlinks ul {
width: 520px;
background-color:#303b3c;
margin:0 0 8em 0; /* <=change bottom margin from 12px to 8em */
padding:7px;
}
and add the same background color to #bottomlinks ul li?
I mean, does it start to *look* like what you want?
--
John
| |
| FuzzyLogik 2006-11-19, 7:36 pm |
|
John Hosking wrote:
> FuzzyLogik wrote:
> [exchange snipped]
>
> I'm still not real clear on what you want to do. Does it help you near
> your goal if you do this:
>
> #bottomlinks ul {
> width: 520px;
> background-color:#303b3c;
> margin:0 0 8em 0; /* <=change bottom margin from 12px to 8em */
> padding:7px;
> }
> and add the same background color to #bottomlinks ul li?
>
> I mean, does it start to *look* like what you want?
>
> --
> John
Yes, it makes it start to *look* right, but certainly not the code I am
looking for.
I basically want it to look like it does in IE, in FF.
To do that, I need to clear the float on the #bottomlinks, but I need a
semantic way of clearing it.
| |
|
|
| John Hosking 2006-11-19, 7:36 pm |
| FuzzyLogik wrote:
[color=darkred]
>
> I basically want it to look like it does in IE, in FF.
I hadn't even tried it in IE, just looked at your gif.
> To do that, I need to clear the float on the #bottomlinks, but I need a
> semantic way of clearing it.
See Bergamot's link, but maybe also try this:
#bottomlinks ul {
width:32em;
background-color:#303b3c;
margin:0 0 1em 0;
padding:.5em;
min-height:8em;
}
#bottomlinks ul li {
list-style-type:none;
float:left;
width:15em;
}
My suggested changes are slightly indented. Not tested in IE.
I believe you'll have (more) trouble if you don't switch to ems or %.
Watch what happens when you resize the text.
--
John
| |
| Michael Fesser 2006-11-19, 7:36 pm |
| ..oO(FuzzyLogik)
>To do that, I need to clear the float on the #bottomlinks, but I need a
>semantic way of clearing it.
#bottomlinks ul {
overflow: hidden;
...
}
Micha
| |
| dorayme 2006-11-19, 7:36 pm |
| In article
<1163299123.146131.29510@i42g2000cwa.googlegroups.com>,
"FuzzyLogik" <tawxic@XXXXXXXXXX> wrote:
>
> That's not the result I want, though.
>
> http://www.phazm.net/newphazm/index.gif
Moving the div up as I suggested made it look nothing like this
in my FF (on a Mac). It made the "Get Info On" and list move out
of the brighter green zone and down into the olive green
background.
--
dorayme
|
|
|
|
| Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |