Darryl Morley Darryl Morley - 2 months ago 9
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;
}