Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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

    Code:
    <!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>
    Last edited by vonNiklasson; 08-02-2011 at 11:23 PM. Reason: Shortened question and updated code.

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    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

    Code:
    .centered {
     width: 100px;
     height: 100px;
     position: fixed;
     top: 50%;
     left: 50%;
     margin-top: -50px;
     margin-left: -50px;
    }
    Code:
    <div class="centered"></div>
    Last edited by Sammy12; 08-02-2011 at 10:38 PM.

  • #3
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Sammy12 View Post
    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

    Code:
    .centered {
     width: 100px;
     height: 100px;
     position: fixed;
     top: 50%;
     left: 50%;
     margin-top: -50px;
     margin-left: -50px;
    }
    Code:
    <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.

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    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

    Code:
    .logo {
        display: table-cell;
        vertical-align: middle ;
    }
    Last edited by Sammy12; 08-02-2011 at 10:49 PM.

  • #5
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Sammy12 View Post
    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

    Code:
    .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?

  • #6
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    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
    --------------

    --------------
    Last edited by Sammy12; 08-02-2011 at 11:37 PM.

  • #7
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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,outlook 2010


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •