[ramses]

Hej!

Jag begriper inte detta. Jag har en horizontell lista som en meny och en logga bredvid till vänster. Inget konstigt. Så har list-elementet en border-bottom. Nu är det så att den stretchar ut alldeles för långt åt höger så att sidan inte får en fin rak högermarginal. Det beror förmodligen på att jag använt min-width, men om jag inte gör det så blir listan vertikal när fönstret är mindre.

Jag har provat sätta border-bottom på loggoelementet i stället men då måste jag sätta z-index på en av dem annars blir antingen loggan eller menyn inte klickbar.

Adressfältet nertill har i stort sett samma kod och i stället en border top, men där ser det ut som det ska. Där har jag också använt mig av min-width.

Så här ser html-koden ut för menyn:

<!-- Menu -->
<div class="logo"><a href="index.html"><img src="images/logo.gif" border="0"></a></div>


<div class="menu">

<ul>
<li><a href="om.html">Om Lefa</a></li>
<li><a href="prod.html">Produkter & Tjänster</a></li>
<li><a href="kvalitet.html">Kvalitet & Miljö</a></li>
<li><a href="kompetens.html">Kompetens</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
<br style="clear:both">
</div>

Så här ser det ut i den externa css-filen:

.logo
{
position: absolute;
background: transparent;
margin-bottom: 100px;
left: 150px;
top: 50px;
min-width: 200px;
max-width: 300px;
padding-bottom: 10px;
}



.menu ul{
margin-top: 50px;
margin-bottom: 100px;
padding-top: 0px;
padding-left: 450px;
position: absolute;
text-transform: uppercase;
min-width: 800px;
max-width: 900px;
background: transparent;
border-bottom: 1px solid #e68117;
}

.menu ul li{
display: inline;
}

.menu ul li a{
float: left;
text-decoration: none;
color: #B0B0B0;
padding: 10.5px 11px;
background: transparent;
}

.menu ul li a:hover{
color: #B0B0B0;
text-decoration: underline;
}

.menu ul li a:visited
{
color: #B0B0B0;
}

[blomkruka]

Lägg upp nånstans så man kan få bild på det hela utan att behöva krångla själv

[tnek]

Jag vet inte om jag riktigt förstod allt, men kan du inte istället för min-width använda width och sätta menyn så bred som du vill ha den?

[ramses]

Jag har den inte utlagd någonstans just nu....men det kommer...

Sätter jag en fast width eller auto så blir menyn vertikal när man krymper ihop fönstret. Jag har lyckats löst detta och jag vet inte riktigt hur, men bland annat genom att lägga border som en bild i stället. Inte helt lyckat, men det ser åtminstone snyggt ut.

Nu går jag vidare, vi ska inte tala om hur spektaklet ser ut i IE. I Safari ser den jättebra ut nu.

[gfors]

Ursprungligen postat av ramses

Jag har den inte utlagd någonstans just nu....men det kommer...

Sätter jag en fast width eller auto så blir menyn vertikal när man krymper ihop fönstret. Jag har lyckats löst detta och jag vet inte riktigt hur, men bland annat genom att lägga border som en bild i stället. Inte helt lyckat, men det ser åtminstone snyggt ut.

Nu går jag vidare, vi ska inte tala om hur spektaklet ser ut i IE. I Safari ser den jättebra ut nu.

Ja tyvärr så har du en hel del tokigheter i koden, så jag kan tänka mig att du kommer få väldigt konstiga beteenden i olika webbläsare.

Min/Max-width/height värden är ingen höjdare att använda då dom inte stöds fullt ut av IE exempelvis.

Det finns hur som helst mängder av förbättringar du kan göra med hur du byggt upp din lista/meny, men utan en sida att kika på (där man ser sammanhanget i layouten, det är ju mer på sidan än bara menyn) så blir det lite väl tidskrävande att hjälpa dig.

[ramses]

Ja, ack! Jag vet! Jag håller på att städa nu. Återkommer...

[tnek]

Ett alternativ är ju annars att utgå från något färdigt exempel och bygga om så det passar dina behov, finns som sagt en del konstigheter i koden, istället för class borde du ha id, <br style="clear:both"> har jag aldrig sett tidigare osv

här har du lite kodexempel på horisontella menyer: http://www.dynamicdrive.com/style/cs...y/category/C1/

[ramses]

Tack Tnek,
Den "konstiga" meny har jag tagit från nätet och byggt om. Jag tror att jag i ren desperation har ändrat så mycket i dokumentet att jag tappat kontrollen.

Tillbaka till ursprungsproblemet.
Jag har en sida som ligger här:

http://www.aiorema.se/lefa/index.html

Den fungerar ok i de flesta webbläsare, men som ni ser så blir de horizontella menyerna vertikala när man krymper sidan på bredden. Jag förstår inte varför. Det är därför jag försökt mig på min-width och det har ju hjälpt delvis, men då har jag någonstans på vägen fått sidan att bli helt hiskeligt ful i IE. Det häller alltså även de horizontella bilderna på sidan som liksom är designens kärna.

Vore så oerhört tacksam om jag kunde få hjälp med detta. Jag vet att det finns konstigheter i koden och jag tar gärna emot synpunkter. Jag är självlärd och har ingen att fråga eller ens bolla med. Jag är helt beroende av resurser på nätet. Men det är väl de flesta kanske.

CSS-koden är lång, men det här kanske räcker så länge:
.menucontainer
{
padding: 0 px;
background-color: #0F0;
float: right;
text-align: right;
}

.logo
{
padding: 0 px;
background-color: #FFFFFF;
float: left;
}


.mainitems
{
float: left;
padding-top: 75px;
padding-left: 40px;
padding-bottom: 7px;
font-family: verdana, arial, helvetica, serif;
font-size: 10px;
color: #B0B0B0;
text-transform:uppercase;
text-align: right;
letter-spacing: 0px;
border-color: #e68117;
border-width: 5;
background-color: #0F0;

}


#csstopmenu li>ul
{/* non IE browsers */
top: auto;
left: auto;
}

#csstopmenu li:hover ul, li.over ul
{
display: block;
}

html>body #clearmenu{ /* non IE browsers */
height: 5px;
}

#csstopmenu, #csstopmenu ul{
padding: 0;
margin: 0;
list-style: none;
#B0B0B0
}

#csstopmenu li{
float: left;
position: relative;
#B0B0B0
}

#csstopmenu a{
text-decoration: none;
color: #B0B0B0;
}


/* ### BILDGALLERI FÖRSTASIDAN ################################# */

.galleri
{
margin-top: 100px;
margin-left: 30px;
margin-right: 30px;
margin-bottom: 100px;
float:left;
width: 100%;
}

.topicbox_index
{
float: left;
padding: 10px;
margin-top: 0px;
background-color: #e68117;
font-family: verdana, arial, helvetica, serif;
font-size: 9px;
color: #ffffff;
letter-spacing: 0px;
text-transform:uppercase;
border-top: 1px solid #ffffff;

width: 180px;
height: 190px;
}

.img
{
float: left;
display: block;
margin-top: 0px;
border-style: none;
text-align: center;
postion: relative;
}


.img img
{
float= left;
display: block;
margin: 1px;
border-style: none;
}

.img a active a:hover img { border: 0px solid #000000; }



Tack! /Jennie

[webthigern]

Vad jag kan hitta i koden i styles.css så har du marginal till höger om menylänkarna vilket ju gäller för alla menylänkar, även den sista! =)

När jag ändrar följande:

.menu ul li a {
color:#B0B0B0;
margin-right:20px;
padding:0 3px 4px;
text-decoration:none;
}

till margin-left:20 enligt nedan.

.menu ul li a {
color:#B0B0B0;
margin-left:20px;
padding:0 3px 4px;
text-decoration:none;
}

Så ser det bra ut hos mig.

Hjälpte det dig med högermarginalen iaf?

Mvh
wt