Baxtex Posted April 12, 2011 Share Posted April 12, 2011 So, i have now done a rather simple "link box": .g{float:left;width:70%;padding:0;margin:auto;list-style-type:none; }.g a{float:left;width:6em;text-decoration:none;color:white;background-color:purple;padding:0.2em 0.6em;border-right:1px solid white;}.g a:hover {background-color:#ff3300;}.g li {display:inline;}.g a.l{border-right:0px;} But i want it to be in the top center of my page, but i can't get that to work. I have tried both using "margin:auto;" and "margin-right:auto;margin-left:auto;" but nothing happens with my "link box". Somebody got any ideas? Link to comment Share on other sites More sharing options...
jeffman Posted April 12, 2011 Share Posted April 12, 2011 If the link box is .g , you cannot float the element to the left AND center it. Link to comment Share on other sites More sharing options...
Baxtex Posted April 13, 2011 Author Share Posted April 13, 2011 But I have tried to remove the float:left from g, it moves like 200px from the right, but it's still not centerd.I tried to make a new element: HTML:<div class="z"><p>blalalalallaallalalalalalaalal</p></div>CSS:.z{margin:auto;width:70%;background-color:blue;} That worked. I made a div elment around my "link box" and did the same thing, but i would't work.Can someone please help me? Soon i'l break my keyboard in half! Link to comment Share on other sites More sharing options...
ShadowMage Posted April 13, 2011 Share Posted April 13, 2011 Show us the HTML. If it isn't too long, post the entire page and all your CSS, otherwise just post the link box and the relevant CSS. Link to comment Share on other sites More sharing options...
Baxtex Posted April 13, 2011 Author Share Posted April 13, 2011 I Actually got it worked, out, in some weird way....Well anyways, i got a new problem with a link box: HTML:<!DOCTYPE HTML><html><head><title>Linderöds allmek</title><link href="linderodmall.css" rel="stylesheet" type="text/css"></head><body><br/><div class="div1"><div class="u"><ul class="m"><li><a href="#home">Om företaget</a></li><li><a href="#news">Bilder</a></li><li><a href="#contact">Kontakt</a></li></ul></div></div></body></html>CSS:ody{font-size:100%; background-color:white; color:black; margin:100px;padding:0; background-image:url('loggajpg.jpg'); background-repeat:no-repeat; background-position:33% 0%; background-attachment:static;}.div1{width:600px; padding:10px; border:5px solid gray;margin:auto; height:800px; border-style:outset;border-radius:10px; box-shadow: 10px 10px 5px #888888; }.m{list-style-type:none;margin:0;padding:0;padding-top:6px;padding-bottom:6px;}.m li{float:left; display:inline; }.m a{width:600px; display:block; }.m a:link{font-weight:bold;color:#FFFFFF;background-color:#98bf21;text-align:center;padding:6px;text-decoration:none;}.m a:visited{font-weight:bold;color:#FFFFFF;background-color:#98bf21;text-align:center;padding:6px;text-decoration:none;}.m a:hover {background-color:#7A991A;}.m a:active{background-color:#7A991A;}.u{width:100%; position:relative; left:200px; display:inline;} Link to comment Share on other sites More sharing options...
ShadowMage Posted April 13, 2011 Share Posted April 13, 2011 So what's the new problem, then? Link to comment Share on other sites More sharing options...
Baxtex Posted April 13, 2011 Author Share Posted April 13, 2011 I acutally solve the new problem myself too. It was that i had a link box, but i would't fill out my whole div element. But after some time i finally found the problem, i have out padding on in the box property. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.