Getting a vertically centered div to collide with non-centered divs

vonNiklasson

08-02-2011, 10:21 PM

Hi!

As well as I am new to this forum, I am also quite new to using CSS in an advanced way.

I'm on my current project:
http://johan.nicklassons.se/d

But I've got a problem with the links floating behind the logo-holder. I want the links to float around and beneath the logo-holder which should be centered.
Is there a way to do this?

Thanks in advance!

/Johan

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>

<style type="TEXT/CSS">

body {
background-color: #000000;
}

div.link {
background-color: #FFFFFF;
color: #000000;
font-family: Calibri;
padding: 4px 8px;
margin: 4px;
width: auto;
float: left;
border: solid 1px white;
}

div.link:hover {
color: white;
cursor: hand;
background-color: #000000;
border: solid 1px white;
}

a, a:visited {
text-decoration: none;
}

div.body {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

div.content{
margin: 4px;
}

.logo_holder {
background-color: #FF0000;
width: 690px;
height: 134px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -72px;
margin-left: -345px;
}

</style>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>

<body>

<div class="body">
<div class="content">

<a href="#t"><div class="link">Johans fartfyllda dag - Idag</div></a>
<a href="#t"><div class="link">Jonas är lustig - Igår</div></a>
<a href="#t"><div class="link">Anders är ute och fiskar - 2 dagar sedan</div></a>
<a href="#t"><div class="link">Kenneth spelar dragspel - 4 dagar sedan</div></a>
<a href="#t"><div class="link">Benny cyklar - 1 vecka sedan</div></a>
<a href="#t"><div class="link">Tomas hoppar stylta - 15 dagar sedan</div></a>
<a href="#t"><div class="link">Johans fartfyllda dag - 16 dagar sedan</div></a>
<a href="#t"><div class="link">Jonas är lustig - 17 dagar sedan</div></a>
<a href="#t"><div class="link">Anders är ute och fiskar - 19 dagar sedan</div></a>
<a href="#t"><div class="link">Kenneth spelar dragspel - 22 dagar sedan</div></a>
<a href="#t"><div class="link">Benny cyklar - 1 månad sedan</div></a>
<a href="#t"><div class="link">Tomas hoppar stylta - 2 månader sedan</div></a>

<div class="logo_holder">LOGO HOLDER</div>

</div>
</div>

</body>
</html>

Sammy12

08-02-2011, 10:35 PM

vonNiklasson

08-02-2011, 10:44 PM

so you want the links to go around the logo or break and go underneath. simplify the question so that lazy eyed readers like myself can find a solution

---

to center an object, you can use position: fixed; then use negative margins equal to half the height of the object

.centered {
width: 100px;
height: 100px;
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}

<div class="centered"></div>

Exactly! I've added a simplified question in main post, however, once again:
I'd like some links contained in divs at the top of the page to go around and beneath a centered div in the middle of the page.

I have no problem with the centering of the div, but when I center it vertically, the links floats over it instead of around it.

Sammy12

08-02-2011, 10:47 PM

vonNiklasson

08-02-2011, 11:21 PM

well for starters, the logo image should be a part of the page, not a background to the body. I think the only way to achieve this is by setting a container to margin: 0 auto; then floating everything within it.

You could also use display: table-cell to center the logo

.logo {
display: table-cell;
vertical-align: middle ;
}

Thanks, I've fixed that now (updated both website and code).
But how do I make the links take consideration to the logo's position as well?

Sammy12

08-02-2011, 11:30 PM

well there's no float: center; so I think all these wrapping of links has to be done manually with a lot of floating and positioning.
I've seen this done on wikipedia's homepage, but they just position: absolute; everything

No easy way to do this I don't think, inless I'm missing something
Basically you need to layout the page like this:

--------------

--------------
3 columns
--------------

--------------

jerry0503222

08-03-2011, 04:55 AM

well there's no float: center; so I think all these wrapping of links has to be done manually with a lot of floating and positioning.
I've seen this done on wikipedia's homepage, but they just position: absolute; everything

____________________________________________
microsoft office professional 2010 (http://www.professionalplus2010.com),outlook 2010 (http://www.buyoutlook2010.com)