Darryl Morley Darryl Morley - 8 months ago 31
CSS Question

How to not use absolute positioning CSS

I'm currently working on an old website that was created with some old crappy WYSIWYG editor. I'm new to web-dev and still trying to get my head around positioning elements properly. My current issue is, from what I have read, using absolute positioning is BAD, but how would you change this?

So this is the old code:

<div id="wb_Text1"
style="margin:0;
padding:0;
position:absolute;
left:187px;
top:24px;
width:83px;
height:147px;
text-align:left;
z-index:1;
border:0px #C0C0C0 solid;
overflow-y:hidden;
background-color:transparent;
">
<div style="font-family:'.Helvetica Neue DeskInterface';font-size:15px;color:#000000;">
<div style="text-align:left">
<span style="font-family:Arial;font-size:43px;color:#FFFFFF;">
<strong>W</strong>
</span>
</div>
<div style="text-align:left">
<span style="font-family:Arial;font-size:43px;color:#FFFFFF;">
<strong>A</strong>
</span>
</div>
<div style="text-align:left">
<span style="font-family:Arial;font-size:43px;color:#FFFFFF;">
<strong>C</strong>
</span>
</div>
</div>


And what I have come up with to replace it is:

HTML

<div class="logo-ul">
<ul>
<li>W</li>
<li>A</li>
<li>C</li>
</ul>
</div>


CSS

.logo-ul {
list-style-type: none;
color: white;
font-size: 2em;
z-index:24;
float: right;
margin-right: 80%;
}


Which looks fine until you collapse the window and it falls apart :( lol.

You can see what I'm doing here http://media.wacmotorcycles.co.uk/

How should I be writing this please?

Thanks.

Answer

Try changing #logo to

#logo {
    max-width: 165px;
    max-height: 171px;
    margin: 0.75em 0;
    float: left;
}

And, .logo-ul to

.logo-ul {
    list-style-type: none;
    color: white;
    font-size: 2em;
    z-index: 24;
    float: left;
}