WN

WN (https://www.wn.se/forum/index.php)
-   Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)
-   -   CSS problem - vad e felet? - (https://www.wn.se/forum/showthread.php?t=1039864)

Simpsons_lover 2010-01-05 22:11
CSS problem - vad e felet? -
 
Hej!
För att se hela koden gå in här: http://www.wn.se/showthread.php?p=20337918#post20337918
Jag är nybörjare i CSS så klaga inte.
Men när jag skriver såhär:

"
.meny3{
font-family: arial, verdana;
font-size: 18px;
color: #FFF;
padding: 0px 0px 0px 100px;
margin-top: -85px;
}


.meny4{
font-family: arial, verdana;
font-size: 18px;
color: #FFF;
padding: 0px 0px 0px 7px;
margin-top: -85px;
}
"

När jag endast ändrar meny4 så kommer den på perfekt plats, men sedan när jag ändrar 3 också så kommer allt ovanför sidan om man kan bara så lite av texten för att den är så högt upp.

Vad ska jag göra för att fixa det?

Såhär ser det ut i divarna:

"
<div class="meny3">
Meny3
</div>

<div class="meny4">
Meny4
</div>
"


Tacksam för snabb hjälp! :)

Viktor 2010-01-05 22:15
margin-top: 85px;?

Simpsons_lover 2010-01-05 22:17
Citat:
Ursprungligen postat av Viktor (Inlägg 20337855)
margin-top: 85px;?
Om jag skriver margin-top: 85px; så hamnar saken på helt fel plats.
Men skriver jag: margin-top: -85px; så hamnar den rätt.

Simpsons_lover 2010-01-05 22:25
Citat:
Ursprungligen postat av Viktor (Inlägg 20337855)
margin-top: 85px;?
Eller du kanske mera att själva koden e fel?
Vad ska det isåfall stå?^^

Simpsons_lover 2010-01-06 00:11
Någon som kan hjälpa mig med detta? :)

rhdf 2010-01-06 05:13
utan att veta hur omgivande kod ser ut eller hur slutresultatet är tänkt att bli, så misstänker jag att det är just din negativa marginal som spökar.

Det är ju rätt logiskt att din meny hamnar ovanför sidan om det inte är mer än 85px från sidans topp till där diven borde legat (om det inte fanns någon margin)

Simpsons_lover 2010-01-06 12:02
Jo troligtvis är det väll det.
Kan posta hela koden.

CSS-koden.
Kod:
.meny{
background: url(meny.jpg) no-repeat right;
padding: 5px 0px 0px 0px;
width: 400px;
height: 30px;
}

.meny2{
font-family: arial, verdana;
font-size: 18px;
color: #000;
padding: 5px 0px 0px 10px;
width: 400px;
height: 30px;
}

.meny3{
font-family: arial, verdana;
font-size: 18px;
color: #000;
padding: 0px 0px 0px 100px;
}


.meny4{
font-family: arial, verdana;
font-size: 18px;
color: #000;
padding: 0px 0px 0px 7px;
height: 30px;
margin-top: -85px;
}

----

HTML-koden.
Kod:
<HTML>
<HEAD>
<TITLE>Test.</TITLE>
<link rel="stylesheet" href="vp.css" type="text/css" />
</HEAD>
<BODY>



<div class="meny">
</div>

<div class="meny2">
Meny2
</div>

<div class="meny3">
Meny3
</div>

<div class="meny4">
Meny4
</div>

</BODY>
</html>


Kom ihåg jag e nybörjare, så kanske något vanligt fel har kommit in.
Sen så har jag nu endast "margin-top: -85px;" för då passar "Meny4" in.
Såhär ser det ut just nu:

http://i50.tinypic.com/23tnia8.jpg
(Jag gjorde meny designen där texten ska stå på lite snabbt för att lära mig css.)

Och jag vill att alla ord ska hamna på rätt plats.

Tacksam om någon kan hitta felet här.

Marku 2010-01-06 14:47
Får jag fråga hur dom ska ligga? sida vid sida?

om så är fallet så ändrade jag åt dig

Kod:
.meny{
background: url(meny.jpg) no-repeat right;
padding: 5px 0px 0px 0px;
width: 400px;
height: 30px;
}

.meny2{
font-family: arial, verdana;
font-size: 18px;
color: #000;
padding: 5px 0px 0px 10px;
height: 30px;
float: left;
}

.meny3{
font-family: arial, verdana;
font-size: 18px;
color: #000;
padding: 0px 0px 0px 100px;
float: left;
}


.meny4{
font-family: arial, verdana;
font-size: 18px;
color: #000;
padding: 0px 0px 0px 7px;
height: 30px;
float: left;
}
Kod:
<HTML>
<HEAD>
<TITLE>Test.</TITLE>
<link rel="stylesheet" href="vp.css" type="text/css" />
</HEAD>
<BODY>



<div class="meny">
<div class="meny2">
Meny2
</div>

<div class="meny3">
Meny3
</div>

<div class="meny4">
Meny4
</div>

</div>


</BODY>
</html>

Simpsons_lover 2010-01-06 15:54
Tack så mycket! :)
Nu funkar allt!

*Tråden kan låsas*

Marku 2010-01-06 16:58
Varsågod :)

Simpsons_lover 2010-01-06 18:34
Vet du vad felet är här då?
Vill ha dom här 2 bilderna högst upp brevid varandra, men funkar inte.
Dom hamnar precis under varandra istället. :(


CSS-koden.
Kod:
.header{
background: url(header.jpg) no-repeat right;
padding: 0px 0px 0px 0px;
width: 400px;
height: 153px;
}

.header2{
background: url(header2.jpg) no-repeat right;
padding: 0px 0px 0px 0px;
width: 400px;
height: 153px;
}


HTML-Koden.
Kod:
<div class="header">
</div>

<div class="header2">
TEXT
</div>

Marku 2010-01-06 18:41
gör exakt som förra gånger, dvs
Kod:
float: left;
På båda elementen

Simpsons_lover 2010-01-06 18:46
Tack!
Men då hamnar menyn fel.
Och när jag flyttar ner den, så hamnar texten dubbelt så långt ner än menyn.
Vet du vad felet kan vara då?
Ska jag skicka koden?

Marku 2010-01-06 19:17
Skicka koden :)

Simpsons_lover 2010-01-06 19:22
CSS-Koden.
Kod:
.header{
background: url(header.jpg) no-repeat right;
padding: 0px 0px 0px 0px;
width: 400px;
height: 153px;
float: left;
}

.header2{
background: url(header2.jpg) no-repeat right;
padding: 0px 0px 0px 0px;
width: 400px;
height: 153px;
float: left;
}

.meny{
background: url(meny.jpg) no-repeat right;
padding: 0px 0px 0px 0px;
width: 400px;
height: 30px;
float: left;
}

.tavlingar{
font-family: arial, verdana;
font-size: 18px;
color: #000;
padding: 0px 0px 0px 12px;
float: left;
}

.linje{
background: url(linje.jpg) no-repeat right;
padding: 0px 0px 0px 20px;
height: 27px;
float: left;
}

.vinnare{
font-family: arial, verdana;
font-size: 18px;
color: #000;
padding: 0px 0px 0px 12px;
float: left;
}

.linje2{
background: url(linje.jpg) no-repeat right;
padding: 0px 0px 0px 20px;
height: 27px;
float: left;
}

.regler{
font-family: arial, verdana;
font-size: 18px;
color: #000;
padding: 0px 0px 0px 12px;
float: left;
}

.linje3{
background: url(linje.jpg) no-repeat right;
padding: 0px 0px 0px 20px;
height: 27px;
float: left;
}

.kontakt{
font-family: arial, verdana;
font-size: 18px;
color: #000;
padding: 0px 0px 0px 12px;
float: left;
}


HTML-Koden.
Kod:
<HTML>
<HEAD>
<TITLE>Test.</TITLE>
<link rel="stylesheet" href="vp.css" type="text/css" />
</HEAD>
<BODY>
<center>

<div class="header">
</div>

<div class="header2">
Tävlingar
</div>


<div class="meny">
<div class="tavlingar">
Tävlingar
</div>

<div class="linje">
</div>

<div class="vinnare">
Vinnare
</div>

<div class="linje2">
</div>

<div class="regler">
Regler
</div>

<div class="linje3">
</div>

<div class="Kontakt">
Kontakt
</div>

</div>

</center>
</BODY>
</html>

Marku 2010-01-06 20:04
Kan du länka mig dit du har sidan så jag kan se på problemet live?

Simpsons_lover 2010-01-06 20:18
Självklart.
Här: http://vinnprylar.se/wn/demo.html

Marku 2010-01-06 20:30
Kod:
<div class="header">
</div>

<div class="header2">
Tävlingar
</div>
edit: efter slutet på meny diven

Simpsons_lover 2010-01-06 20:34
Nej du... då kom menyn vänster om headern.

Kolla: http://vinnprylar.se/wn/demo.html

Marku 2010-01-06 20:38
demo.html
Kod:
<HTML>
<HEAD>
<TITLE>Test.</TITLE>
<link rel="stylesheet" href="vp.css" type="text/css" />
</HEAD>
<BODY>
<center>

<div class="meny">
<div class="tavlingar">
Tävlingar
</div>

<div class="linje">
</div>

<div class="vinnare">
Vinnare
</div>

<div class="linje2">
</div>

<div class="regler">
Regler
</div>

<div class="linje3">
</div>

<div class="Kontakt">
Kontakt

</div>

</div>
<div class="wrap">
<div class="header">
</div>

<div class="header2">
<br/> Här ska det stå något.
</div>
</div>
</center>
</BODY>
</html>
vp.css
Kod:
.wrap {
width: 800px;
margin: 0 auto;
}
.header{
background: url(header.jpg) no-repeat right;
padding: 0px 0px 0px 0px;
width: 400px;
height: 153px;
float: left;
}

.header2{
background: url(header2.jpg) no-repeat right;
padding: 0px 0px 0px 0px;
width: 400px;
height: 153px;
float: left;
}

.meny{
background: url(meny.jpg) no-repeat right;
padding: 0px 0px 0px 0px;
width: 400px;
height: 30px;
float: left;
}

.tavlingar{
font-family: arial, verdana;
font-size: 18px;
color: #000;
padding: 0px 0px 0px 12px;
float: left;
}

.linje{
background: url(linje.jpg) no-repeat right;
padding: 0px 0px 0px 20px;
height: 27px;
float: left;
}

.vinnare{
font-family: arial, verdana;
font-size: 18px;
color: #000;
padding: 0px 0px 0px 12px;
float: left;
}

.linje2{
background: url(linje.jpg) no-repeat right;
padding: 0px 0px 0px 20px;
height: 27px;
float: left;
}

.regler{
font-family: arial, verdana;
font-size: 18px;
color: #000;
padding: 0px 0px 0px 12px;
float: left;
}

.linje3{
background: url(linje.jpg) no-repeat right;
padding: 0px 0px 0px 20px;
height: 27px;
float: left;
}

.kontakt{
font-family: arial, verdana;
font-size: 18px;
color: #000;
padding: 0px 0px 0px 12px;
float: left;
}
edit: update på koden

Simpsons_lover 2010-01-06 20:43
Hm.. jag klistrade nu in koden du skrev.
Så vart det såhär:

http://i45.tinypic.com/69f0o4.jpg

För att kolla själv: http://vinnprylar.se/wn/demo.html

Marku 2010-01-06 20:45
Updaterade koden i förra inlägget, kolla den istället.


edit: för att inte dra ut på tiden vill du ha boxen bredvid "vinnprylar" loggan eller under?

Simpsons_lover 2010-01-06 20:46
Hm.. har gjort det nu men vart fortfarande strul...

http://vinnprylar.se/wn/demo.html

Simpsons_lover 2010-01-06 20:48
Citat:
Ursprungligen postat av Marku (Inlägg 20337987)
Updaterade koden i förra inlägget, kolla den istället.


edit: för att inte dra ut på tiden vill du ha boxen bredvid "vinnprylar" loggan eller under?
Loggan och boxen ska vara brevidvarandra, sen menyn under.

Marku 2010-01-06 20:51
Jaha ska menyn vara under..

Kod:
<HTML>
<HEAD>
<TITLE>Test.</TITLE>
<link rel="stylesheet" href="vp.css" type="text/css" />
</HEAD>
<BODY>
<center>
<div id="wrap">
<div class="header">
</div>

<div class="header2">
Tävlingar
</div>


<div class="meny">
<div class="tavlingar">
Tävlingar
</div>

<div class="linje">
</div>

<div class="vinnare">
Vinnare
</div>

<div class="linje2">
</div>

<div class="regler">
Regler
</div>

<div class="linje3">
</div>

<div class="Kontakt">
Kontakt
</div>

</div>
</div>
</center>
</BODY>
</html>
Sådär

edit: sorry miss av mig, ändra <div id="wrap"> till <div class="wrap">

Simpsons_lover 2010-01-06 20:52
Nu hamnade ju den brevid? Åt höger

Marku 2010-01-06 20:58
Sådär :) (kort inlägg)

Simpsons_lover 2010-01-06 20:58
Tack så mycket för all hjälp! :)

Kommer säkert stöta på mera problem på vägen till färdig sida.
Så lås inte tråden :)

Oscar11 2010-01-06 22:30
Enkelt. Lägg in en float:left; bara

rhdf 2010-01-07 01:55
jag kollade lite snabbt på din kod och insåg att du gör saker onödigt komplicerat, eller rättare sagt du gör det "så lätt så det blir fel"

tex så har du en klass för varje linje mellan meny-alternativen, varför då?
alla ser ju likadana ut, så där hade du enkelt kunnat ha enbart <div class="linje">

Samma "dumhet" har du på själva "meny-elementen", en klass för varje alternativ men de ser alla likadana ut. Du skulle med andra ord kunna lägga den css-koden på ETT ställe istället för 4

Bäst hade ju iofs varit om menyn var en lista (<ul>) och linjen löses med en border på <li> elementet och en special-klass för sista elementet så att den inte får en border


Alla tider är GMT +2. Klockan är nu 03:29.

Programvara från: vBulletin® Version 3.8.2
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
Svensk översättning av: Anders Pettersson