6 svar · 635 visningar · startad av caro-a
Jag har stort problem med att positionera två divar i en i headern så att säga. Vid mindre webbläsarfönster flyter den högra över den vänstra och jag har försökt med float:left och right, margin, och position:relative tillsammans med float och utan float med top,left,right,bottom osv osv.
Ingenting fungerar! Vill veta vad jag gör för fel, har hållit på i månader nu men kan inte lösa det...
En himla bra idé är att visa koden. Gärna en länk till sidan också.
Annars krävs det ett medie för att kunna hjälpa.
Det är konstigt för innehållet i containern är också float men flyttas inte alls! Här är sidan http://www.makeupedia.se och koden för headern och menyn i wordpress:
/* HEADER */
#header{
margin:0;
padding:0;
width:100%;
height:169px;
background:#b60e52;
}
#headone{
float:left;
margin:0px 0px 0 0px;
width:100%;
height:167px;
background-image:url(http://img138.imageshack.us/img138/1702/headerdww.jpg);
background-repeat:no-repeat;
border-bottom: 1px ridge #b60e52;
}
#headone h1{
font-size:2em;
padding:20px 15px 0px 100px;
color:#b60e52;
}
#headone h2{
padding:15px 0px 0px 20px;
color:#b60e52;
font-size:16px;
}
#headtwo{
float:right;
margin:10px 0px 0 0px;
}
/* MENU */
ul#menu{
margin-top:169px;
padding:10px;
color:#464646;
font-size:1.5em;
list-style-type:none;
width:100%;
height:70px;
background-image:url(http://img714.imageshack.us/img714/2982/lowvu.jpg);
background-repeat:no-repeat;
border-bottom: 3px ridge #b60e52;
}
ul#menu li {
position:relative;
top:20px;
left:200px;
font-size:1em;
display:inline;
width:100%;
font-family:verdana,arial,"lucida sans",geneva,trebuchet,helvetica,sans-serif;
}
ul#menu li a {
padding:0 15px;
display:inline;
color:#464646;
margin-right:2px;
font-size:1em;
width:100%;
}
ul#menu li a:hover {
padding:0 15px;
display:inline;
color:#000;
margin-right:2px;
font-size:1em;
width:100%;
}
Nu har jag redigerat koden ovan som den ser ut nu!
Vad jag kan se nu har jag lyckats lösa det problemet men menyn flyter fortfarande iväg och så har jag för mycket marginal till höger jag inte vet hur jag får bort!
Saken är den att jag gärna vill placera element i den högra headern också, men inget vill lägga sig där! Någon som kan se vad jag gör för fel?
Hur ser HTML koden ut?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_head(); ?>
</head>
<body>
<div id="wrap">
<div id="header">
<div id="headone">
<ul id="menu">
<li class="<?php if ( is_home() or is_archive() or is_single() or is_paged() or is_search() or (function_exists('is_tag') and is_tag()) ) { ?>current_page_link<?php } else { ?>page_link<?php } ?>"><a href="<?php echo get_settings('home'); ?>"><?php _e('Home'); ?></a></li>
<?php wp_list_pages('sort_column=id&depth=1&title_li='); ?>
</ul>
</div>
<div id="headtwo">
<a href="http://www.facebook.com/pages/Makeupedia/159616644063220">
<img src="http://img18.imageshack.us/img18/6725/fbookm.png" height="62" width="62" alt="Facebook" title="Följ oss på Facebook" />
</a>
<a href="http://makeupedia.se/index.rss">
<img src="http://img148.imageshack.us/img148/9602/rssdv.png" height="62" width="62" alt="RSS" title="Prenumenera på RSS" />
</a>
<a href="mailto:info@makeupedia.se"><img src="http://img140.imageshack.us/img140/7404/mailky.png" height="62" width="62" alt="Skicka ett mail" title="Skicka ett mail" />
</a>
</ul>
</div>
</div>
</div>
<div id="container" class="fix">
