webForumDet fria alternativet
Logga in / Bli medlem

Tålamod slut..lite hjälp med css/html behövs nu.

HTML & CSS

9 svar · 719 visningar · startad av Moogle

Moogles avatarMoogleMedlem sedan apr. 200842 inlägg
Frågan#1

Hej,

Har stora svårigheter med positionering i Firefox (och Crome)
.. ser inte klokt ut. :bla
Perfekt i IE.

Det enda som fungerar är background, allt annat är åt skogen fel placerad.
Koden är precis så jag vill ha den i IE, men som sagt..dom andra vill göra som dom vill.

Nån som har öga för det här? :q

body {
font: 12px arial, helvetica, sans-serif;
text-align: center;
min-width: 770px;
  background-image: url('../images/loopbg.png');
  background-attachment: fixed;
  background-position: 5% 80%;
  background-repeat: no-repeat;

}

#wrapper {
text-align: center;
margin-left: auto;
margin-right: auto;
width: 1015px;
height: 100%;

}

#Logo {
width: 800px;
margin-left: -190px;

}

/* TOPMENU */

#menu {
margin-left: 130px;
width: 504px;
height: 100%

}

.menubutton {
height: 32px;
width: 126px;
background: url('../images/Default.png');
float: left;
color: #FFFFFF;
text-align: center;
text-transform: uppercase;
line-height: 32px;
font-size: 10px;

}

.menubutton:hover {
height: 32px;
width: 126px;
background: url('../images/DefaultOnOver.png');
float: left;
color: #99CCFF;
text-align: center;
text-transform: uppercase;
line-height: 32px;
font-size: 10px;
font-weight: bold;

}

/* LEFTMENU */

#left {
text-align: center;
height: 100%;
width: 180px;
float: left;
margin-right: -2px;

}

#lefttop {
height: 33px;
width: 180px;
background: url('../Images/ramTop.png');

}

#leftholder {
width: 180px;
min-height: 320px;
background: url('../Images/ramMiddle.png') repeat-y;

}

#leftbottom {
width: 180px;
height: 36px;
background: url('../Images/ramBottom.png');

}

/* MAIN */

#main {

height: 100%;
width: 789px;
float: left;

}

#maintop {
height: 22px;
width: 789px;
background: url('../Images/Bgtop.png');

}

#mainholder {
width: 789px;
min-height: 350px;
background: url('../Images/BGMiddle.png') repeat-y;

}

#mainbottom {
width: 789px;
height: 69px;
background: url('../Images/BGbottom.png');

}

/* RIGHTMENU */

#rightholder {
width: 40px;
height: 569px;
float: left;

}

    <!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">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
<title>iLoopit.com</title>
<link rel="shortcut icon" href="Images/favicon.ico" />
<link rel="stylesheet" type="text/css" href="styles/screen.css" />
<style type="text/css">
/*<![CDATA[*/
 div.c1 {text-align: center}
/*]]>*/
</style>
</head>
<body>
<div id="wrapper">
<div id="Logo"><img src="Images/logo.png" alt="Your Online Marketing Solution" /></div>
<div id="menu">
<div class="menubutton">add a store</div>
<div class="menubutton">advertise</div>
<div class="menubutton">contact us</div>
<div class="menubutton">about us</div>
</div>
<div id="left">
<div id="lefttop"></div>
<div id="leftholder"><img src="Images/austria.png" border="0" alt="Start your shopping from Austria" title="Start your shopping from Austria" /> <img src="Images/belgium.png" border="0" alt="Start your shopping from Belgium" title="Start your shopping from Belgium" /> <img src="Images/bulgaria.png" border="0" alt="Start your shopping from Bulgaria" title="Start your shopping from Bulgaria" /> <img src="Images/cyprus.png" border="0" alt="Start your shopping from Cyprus" title="Start your shopping from Cyprus" /> <img src="Images/czechrepublic.png" border="0" alt="Start your shopping from the Czech Republic" title="Start your shopping from the Czech Republic" /> <img src="Images/denmark.png" border="0" alt="Start your shopping from Denmark" title="Start your shopping from Denmark" /> <img src="Images/estonia.png" border="0" alt="Start your shopping from Estonia" title="Start your shopping from Estonia" /> <img src="Images/finland.png" border="0" alt="Start your shopping from Finland" title="Start your shopping from Finland" /> <img src="Images/france.png" border="0" alt="Start your shopping from France" title="Start your shopping from France" /> <img src="Images/germany.png" border="0" alt="Start your shopping from Germany" title="Start your shopping from Germany" /> <img src="Images/greece.png" border="0" alt="Start your shopping from Greece" title="Start your shopping from Greece" /> <img src="Images/hungary.png" border="0" alt="Start your shopping from Hungary" title="Start your shopping from Hungary" /> <img src="Images/ireland.png" border="0" alt="Start your shopping from Ireland" title="Start your shopping from Ireland" /> <img src="Images/italy.png" border="0" alt="Start your shopping from Italy" title="Start your shopping from Italy" /> <img src="Images/latvia.png" border="0" alt="Start your shopping from Latvia" title="Start your shopping from Latvia" /> <img src="Images/lithuania.png" border="0" alt="Start your shopping from Lithuania" title="Start your shopping from Lithuania" /> <img src="Images/luxembourg.png" border="0" alt="Start your shopping from Luxembourg" title="Start your shopping from Luxembourg" /> <img src="Images/malta.png" border="0" alt="Start your shopping from Malta" title="Start your shopping from Malta" /> <img src="Images/netherlands.png" border="0" alt="Start your shopping from the Netherlands" title="Start your shopping from the Netherlands" /> <img src="Images/poland.png" border="0" alt="Start your shopping from Poland" title="Start your shopping from Poland" /> <img src="Images/portugal.png" border="0" alt="Start your shopping from Portugal" title="Start your shopping from Portugal" /> <img src="Images/romania.png" border="0" alt="Start your shopping from Romania" title="Start your shopping from Romania" /> <img src="Images/slovakia.png" border="0" alt="Start your shopping from Slovakia" title="Start your shopping from Slovakia" /> <img src="Images/slovenia.png" border="0" alt="Start your shopping from Slovenia" title="Start your shopping from Slovenia" /> <img src="Images/spain.png" border="0" alt="Start your shopping from Spain" title="Start your shopping from Spain" /> <img src="Images/sweden.png" border="0" alt="Start your shopping from Sweden" title="Start your shopping from Sweden" /> <img src="Images/unitedkingdom.png" border="0" alt="Start your shopping from the UK" title="Start your shopping from the UK" /></div>
<div id="leftbottom"></div>
</div>
<div id="main">
<div id="maintop"></div>
<div id="mainholder"><br />
<br />
<br />
<div class="c1"><img src="Images/arrow.png" alt="Select your country" /></div>
<div class="c1"><img src="Images/eu.png" border="0" alt="Show all countries" title="Show all countries" /></div>
<div class="c1"><strong>...or click here for all stores</strong></div>
<br />
<br />
<br /></div>
<div id="mainbottom"></div>
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
    <img style="border:0;width:88px;height:31px"
        src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
        alt="Valid CSS!" />
</a>
    <a href="http://validator.w3.org/check?uri=referer">
	<img style="border:0;width:88px;height:31px"
        src="http://www.w3.org/Icons/valid-xhtml10-blue"
        alt="Valid XHTML 1.0 Transitional" />
</a>
  </p>
  
<div id="rightholder"></div>
</div>
</div>
</body>
</html>
rhdfMedlem sedan okt. 2007446 inlägg
#2

hmm koden är lite jobbigt uppbyggd för att man skall kunna se några direkta dumheter
ett tips är att du börjar med att lägga in en reset-css över din vanliga så att du "nollställer" alla elements värden

Sen borde din meny bestå av en lista istället för 3 divar, jag klippetiklistrar lite o ser vad som eventuellt kan vara fel

Edit
Kollade lite snabbt nu och du har en massa negativa margins och saker som är float:left kors o tvärs,
jag misstänker att det måste till lite clear:both på nåt element nånstans

det är lite svårt att gissa hur sidan borde se ut utan att ha en bild, men jag antar att du är ute efter en 3-kolumners layout med
en radda med flaggor till vänster, nån form av innehåll i mitten och sen en lite fjuttig högerspalt på 40px

Moogles avatarMoogleMedlem sedan apr. 200842 inlägg
#3

Ja den fjuttige högerspalten kan kvitta.. inte jag som lagt dit den.

Html koden är körd igenom w3c valideringen och rensat upp. Grönt ljus där.
Klistrade den direkt inn här, felet fanns före rensningen.

Layout.. gå inn på http://www.iloopit.com.
Det som ska finnas kvar är vänster ram och midtramen. (Inga flash finns numera.). Höger ram ska bort (den som nu är 40px).
Allt ska centreras.

Se på bilden jag skickar med, på ett ungefär ska det se så här ut. Bilden är koden i IE.

index.png
rhdfMedlem sedan okt. 2007446 inlägg
#4

Ok skall allt centreras .. fast vara förskjutet åt vänster?
dvs
[a]
där rutan B är centrerad och rutan a ligger till höger om den ?

Moogles avatarMoogleMedlem sedan apr. 200842 inlägg
#5

ja jag tror nog det blir bäst.. B ska va centrerad och A kommer på vänster sida.
Ska ha inn en ev. banner (C) på höger sida när den tid kommer.

rhdfMedlem sedan okt. 2007446 inlägg
#6

ah då kan man ju lika gärna ge den plats så blir centreringen enklare ;)

Moogles avatarMoogleMedlem sedan apr. 200842 inlägg
#7

Samtidigt har det blivit nåt fel på meny och vänsterramen i FF.
Ser bra ut i IE.

Margin left på meny står nu på 300px.
Vad som händt med mellanrummet som uppstått på ramen vet jag inte.
Finns både uppe och nere.
Nån padding som må till?

FF.pngIE.png
rhdfMedlem sedan okt. 2007446 inlägg
#8

gjorde en liten snabbis http://fjolnir.ebpatour.eu/iloopit/
säkert en hel del som måste fixas, men saker verkar ligga hyfsat rätt iaf

Moogles avatarMoogleMedlem sedan apr. 200842 inlägg
#9

det fungerade med lite små justeringar ;-) Tackar.

Till frågan om mellanrummet som nu har kommit på FF. Hur ska jag få det att gå ihop där?

FF.png
Moogles avatarMoogleMedlem sedan apr. 200842 inlägg
#10

satte inn en <br /> ovan och under första/sista img src så fungerade det :-)

278 ms totalt · 4 externa anrop · v20260731065814-full.86ec41c2
128 ms — deklarationer (db)
0 ms — hämta statistik (cache)
146 ms — hämta tråd, inlägg och bilagor (db)
126 ms — ändringar (db)