Trenger CSS hjelp

[Jokka1990]

Først vil jeg si at denne delen ikke er skrevet av meg.

 

Jeg trenger altså hjelp til å sette opp lenkevisningene mine i sidekolonnen. Sidekolonnen er 300px bred og jeg vil at lenkene innenfor en div skal vises i to kolonner da på en måte.

 

Bruker wordpress om det har noe å si.

 

Håper dere skjønte hva jeg mente. Viss ikke har jeg lagt ved et eksempel.

 

 

.right-nav{ margin:0px; padding:0px; }
.right-nav ul{ width: 100%; margin: 0px; padding: 0px; display: block; overflow:hidden; font-size: 12px; color: #555555; }
.right-nav li{ margin:0px; padding:0px; overflow:hidden; display:inline; text-align:left; width:100%; }
.right-nav ol a, .right-nav ol a:active, .right-nav ol a:visited, .right-nav ol a:link{ font-weight:bold; text-decoration:none; padding: 5px; font-size:16px; color:#555555; overflow:hidden; margin:0px; display:block; border-bottom:1px solid #cccccc; font-family:Georgia, "Times New Roman", Times, serif; }
.right-nav ol{ font-weight:bold; text-decoration:none; padding: 5px; font-size:16px; color:#555555; overflow:hidden; margin:0px; display:block; border-bottom:1px solid #cccccc; font-family:Georgia, "Times New Roman", Times, serif; }
.right-nav ul li ul{ padding:0px 0px 0px 22px; list-style-type:none; margin: 0px; overflow:hidden; display:block; width:100%; border:0px; }
.right-nav ul li ul a, .right-nav ul li ul a:active, .right-nav ul li ul a:visited, .right-nav ul li ul a:link{ margin: 0px; overflow:hidden; display:block; text-decoration:none; padding:5px 5px 5px 16px; color:#2583ad; border-bottom:1px solid #FFFFFF; font-size:11px; font-weight:bold; background-image:url(img/icons/nav-bullet.gif); background-repeat:no-repeat; background-position:left; }
.right-nav ul li ul a:hover{ margin: 0px; overflow:hidden; display:block; text-decoration:underline; padding:5px 5px 5px 16px; background-color:#FFFFFF; border-bottom:1px solid #FFFFFF; color:#2583ad; font-size:11px; font-weight:bold; background-image:url(img/icons/nav-bullet.gif); background-repeat:no-repeat; background-position:left; }
.right-nav li a, .right-nav li a:active, .right-nav li a:visited, .right-nav li a:link{ margin: 0px; overflow:hidden; display:block; text-decoration:none; padding:5px 5px 5px 16px; border-bottom:1px solid #cccccc; color:#2583ad; font-size:11px; font-weight:bold; background-image:url(img/icons/nav-bullet.gif); background-repeat:no-repeat; background-position:left; }
.right-nav li a:hover{ margin: 0px; overflow:hidden; display:block; text-decoration:none; padding:5px 5px 5px 16px; border-bottom:1px solid #d54e21; color:#ffffff; background-color:#d54e21; font-size:11px; font-weight:bold; background-image:url(img/icons/nav-bullet-hov.gif); background-repeat:no-repeat; background-position:left; }

[Jooakim]

Legg inn float: left; og width: 150px; (eller hva som må til) på ul. Så lager du to <ul>-er. Forresten, så vil jeg anbefale å skrive CSS-en noe à la det under - slik at det blir mer oversiktlig. ;-)

 

.right-nav {
margin: 0px;
padding: 0px;
}

.right-nav ul {
width: 100%;
margin: 0px;
padding: 0px;
display: block;
overflow: hidden;
font-size: 12px;
color: #555555;
}

.right-nav li {
margin: 0px;
padding: 0px;
overflow: hidden;
display: inline;
text-align: left;
width: 100%;
}

.right-nav ol a, .right-nav ol a:active, .right-nav ol a:visited, .right-nav ol a:link {
font-weight: bold;
text-decoration: none;
padding: 5px;
font-size: 16px;
color: #555555;
overflow: hidden;
margin: 0px;
display: block;
border-bottom: 1px solid #cccccc;
font-family: Georgia, "Times New Roman", Times, serif;
}

.right-nav ol {
font-weight: bold;
text-decoration: none;
padding: 5px;
font-size: 16px;
color: #555555;
overflow: hidden;
margin: 0px;
display: block;
border-bottom: 1px solid #cccccc;
font-family: Georgia, "Times New Roman", Times, serif;
}

.right-nav ul li ul {
padding: 0px 0px 0px 22px;
list-style-type: none;
margin: 0px;
overflow: hidden;
display: block;
width: 100%;
border: 0px;
}

.right-nav ul li ul a, .right-nav ul li ul a:active, .right-nav ul li ul a:visited, .right-nav ul li ul a:link {
margin: 0px;
overflow: hidden;
display: block;
text-decoration: none;
padding: 5px 5px 5px 16px;
color: #2583ad;
border-bottom: 1px solid #FFFFFF;
font-size: 11px;
font-weight: bold;
background-image: url(img/icons/nav-bullet.gif);
background-repeat: no-repeat;
background-position: left;
}

.right-nav ul li ul a:hover {
margin: 0px;
overflow: hidden;
display: block;
text-decoration: underline;
padding: 5px 5px 5px 16px;
background-color: #FFFFFF;
border-bottom: 1px solid #FFFFFF;
color: #2583ad;
font-size: 11px;
font-weight: bold;
background-image: url(img/icons/nav-bullet.gif);
background-repeat: no-repeat;
background-position: left;
}

.right-nav li a, .right-nav li a:active, .right-nav li a:visited, .right-nav li a:link {
margin: 0px;
overflow: hidden;
display: block;
text-decoration: none;
padding: 5px 5px 5px 16px;
border-bottom: 1px solid #cccccc;
color: #2583ad;
font-size: 11px;
font-weight: bold;
background-image: url(img/icons/nav-bullet.gif);
background-repeat: no-repeat;
background-position: left;
}

.right-nav li a:hover {
margin: 0px;
overflow: hidden;
display: block;
text-decoration: none;
padding: 5px 5px 5px 16px;
border-bottom: 1px solid #d54e21;
color: #ffffff;
background-color: #d54e21;
font-size: 11px;
font-weight: bold;
background-image: url(img/icons/nav-bullet-hov.gif);
background-repeat: no-repeat;
background-position: left;
}

[Rinox]

Kan du slenge med HTML-koden også, så det blir lettere å se hva som skal hvor? Hva med å bruke float?

[Jokka1990]

I sidebar.php ser det slik ut:

<div class="right-nav" style="float:right; width:300px;"> 	

<?php if ( !function_exists('dynamic_sidebar')|| !dynamic_sidebar(1) ) : ?> 		

<?php if (is_single()): ?> 			
 <div style="margin-bottom:10px;"> 				
   <h2>Relaterte innlegg</h2> 				
     <ul class="related"> 					
       <?php related_posts_Shade(); ?> 				
     </ul> 			
 </div> 		
<?php endif; ?> 		

<div style="margin-bottom:10px;"> 			
 <h2>Sider</h2> 			
   <ul> 				
     <?php wp_list_pages('title_li='); ?>  			
   </ul> 		
</div> 		

<div style="margin-bottom:10px;"> 			
 <h2>Kategorier</h2> 			
   <ul> 				
     <?php wp_list_cats('sort_column=name&optioncount=0'); ?> 			
   </ul> 		
</div> 		

<div style="margin-bottom:10px;"> 			
 <h2>Arkiv</h2> 			
   <ul> 				
     <?php get_archives(); ?> 			
   </ul> 		
</div> 		

<div> 			
   <ul> 				
     <li style="padding:0px; background-color:#ffffff;"> 					
       <?php include 'adsense/300x250.php'; ?> 				
     </li> 			
   </ul> 		
</div> 	

<?php endif; ?> 

</div>

 

Prøvde å legge inn float:left og width:140px, men det ødelagde for annonse og arkiv.. Ble bare rot..

[Jokka1990]

Jeg har foreløpig løst problemet med en liten plugin, men jeg vil bli mer enn glad om noen finner en annen løsning