Gå til innhold

Layout problem, height 100% *Delvis løst*

g0mpen

Av g0mpen
i Programmering og webutvikling

Anbefalte innlegg

g0mpen

g0mpen

Skrevet
Skrevet (endret)

Har et lite problem her... lager en klanside, men får en nasty bug i FF dersom content strekker seg lengre enn den totale høyden på mainwrap, som er 100%. Hva er galt? Har prød å legge til og fjerne diverse kodesnutter pgså (feks display: inline) men dette er det jeg har nå:

 

EDIT: Problem 1 løst, nå vil jeg ha menyen midtstilt :whistle:

 

HTML:

<body>

<div id="mainwrap">

<div id="container">
 
 <h1></h1>
 
 <div id="menu">
  <ul>
   <li><a href="#">Home</a></li>
<li><a href="#">Info</a></li>
<li><a href="#">Rules</a></li>
<li><a href="#">Members</a></li>
<li><a href="#">Join</a></li>
<li><a href="#">Stats</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Links</a></li>
  </ul>
 </div>
 
 <div id="infobar">
  <h3>Server info:</h3>
  <h4>ip: 133.713.37:1337</h4>
  <h4>map: de_dust</h4>
  <h4>players: 16/16</h4>
 </div>
 
 <div class="content">
  <div class="news">
  <h2>Heading one</h2><div class="avatar"></div>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
 </div>
 
 <div class="content">
  <div class="news">
  <h2>Heading two</h2><div class="avatar"></div>
  <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
  </div>
 </div>
 
</div>
</div>
</body>

 

CSS:

* {
margin: 0;
padding: 0;
}
html,body {
background: #9aadbc url(gradient.jpg) repeat-x;
text-align: center;
height: 100%;
}
acronym {
cursor: help;
border-bottom: 0;
}
img {
border: 0;
}

/* Divisjoner */
#mainwrap {
background: url(background.gif);
width: 700px;
height: 100%;
margin: 0 auto;
text-align: left;
border-left: 5px solid #54616a;
border-right: 5px solid #54616a;
}
#container {
width: 700px;
height: auto;
}
.content {
width: 500px;
float: left;
}
.news {
width: 400px;
float: left;
display: inline;
}
.avatar {
background: url(icon.jpg) no-repeat;
width: 100px;
height: 100px;
float: right;
display: inline;
}
#infobar {
width: 199px;
float: right;
}

/* Meny */
#menu ul {
list-style-type: none;
text-align: center;
text-indent: 0;
margin: 0;
padding: 0;
}
#menu ul li {
float: left;
margin: 0;
padding: 0;
font-size: 18px;
}
#menu ul li a {
color: #546069;
font-family: "Trebuchet MS", serif;
font-size: 17px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
padding: 0 3px;
}
#menu ul li a:hover {
color: #ffb400;
}
#menu li a:active {
color: #546069;
}
#menu li#active a {
color: #546069;
}

Endret av g0mpen
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Simon Zimmermann

Simon Zimmermann

Skrevet
Skrevet (endret)

Du har ikke lyst å legge ut en link, gOmpen? Det er så mye lettere å finne feil når man ser websiden (og kan bruke Web Developer Toolbar i FF).

 

Ellers kan du prøve å bytte ut mainwrap med denne. Vet ikke om det hjelper, men er vel verdt et forsøk.

#mainwrap {
background: url(background.gif);
width: 700px;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto;
text-align: left;
border-left: 5px solid #54616a;
border-right: 5px solid #54616a;
}

 

Les også denne 100% høyde av Polert

Endret av Waldmeister
Lenke til kommentar
g0mpen

g0mpen

Skrevet
  • Forfatter
Skrevet (endret)

Skulle liksom være hemmelig men :p

http://www.spadeselite.com/beta/

 

Her har jeg med vilje lagt in mye margin på news, slik at du skal se hvordan den faktisk sklir utforbi wrap'en. Den er med din css også forresten, mainwrapen.

 

Ellers er den ikke så pen nå pga manglende padding på resten av siden, men det skal jeg ordne etterhvert. Du kan forresten hjelpe meg med å få menyen midtstilt og, hvis du gidder :love:

 

Edit: Selvfølgelig, visste jeg hadde glemt noe! Takk :D

Så var det menyen da :whistle:

Endret av g0mpen
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...