Gå til innhold

Problem med forlengelse av DIV

Probeus

Anbefalte innlegg

Probeus

Probeus

Skrevet
Skrevet

Hei

 

jeg har nå laget ferdig ett design, men det gjenstår ett problem som jeg ikke klarer å løse...

 

Hvordan får jeg "endene til å møtes"? (Se bilde)

 

index.php:

 

Skjult tekst: (Marker innholdet i feltet for å se teksten):

<html>
<head>
<link rel="stylesheet" type="text/css" href="ff-style.css" />
</head>
<body>
<div id="wrapper">

<div id="banner"><div id="logo"> Dette er en test</div></div>
<div id="rightbanner"><div id="meny">Tester</div></div>
<div id="extender"></div>
 <div id="innholdimg"><img src="images/innhold.gif"></div>
 <div id="innhold">
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/>
 Dette er en test<br/></div>

 <div id="infoimg"><img src="images/info.gif"></div>
 <div id="info">Dette er en test</div>
 <div class="bunn"><img src="images/bunn.gif"></div>
   
   
 <div id="infoimg"><img src="images/stat.gif"></div>
 <div id="info">Dette er en test</div>
 <div class="bunn"><img src="images/bunn.gif"></div>



<div id="Bottom"></div>


</div>
</body>
</html>

 

CSS filen:

Skjult tekst: (Marker innholdet i feltet for å se teksten):

* {
margin: 0 auto;
padding: 0px;
border: 0px;
text-align: center;
}

body {
background: #344432;
}

div#wrapper {
text-align: left;
border: 1px #000000 solid;
background: #5F7463;
width:808px;
margin-top: 50px;
min-height: 400px;
}

div#banner {
background: url('images/head.gif');
margin-top: 2px;
margin-right: 2px;
margin-left: 2px;
width:802px;
height: 176px;
border-top: 1px #000000 solid;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
}

div#logo {
text-align: left;
background: url('images/logo.gif');
margin-top: 0px;
width:300px;
height:85px;
float:middle;
padding-top: 50px;
}

div#meny {
text-align: left;
background: url('images/meny.gif');
margin-top: 120px;
width:101px;
height:281px;
float:left;
padding-top: 10px;
padding-left: 30px;
}

div#rightbanner{
background: url('images/right.gif');
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
margin-left: 2px;
min-height: 400px;
width: 145px;
float:left;
}



div#innholdimg {
margin-left: 16px;
margin-top: 10px;
width: 442px;
height: 17px;
float: left;
}


div#innhold {
text-align: left;
background: #5C8CA2;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
margin-left: 16px;
width: 442px;
height: 424px;
float:left;

}


div#info {
text-align: left;
background: #5C8CA2;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
margin-right: 10px;
margin-left: 16px;
width: 168px;
height: 150px;
float: right;


}

div#infoimg {
margin-right: 10px;
margin-top: -17px;
width: 170px;
height: 17px;
float: right;
}

div.bunn {
margin-right: 10px;
height: 14px;
float: right;
margin-bottom: 30px;
}

div#extender{
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
margin-left: 2px;	
margin-top: 410px;
position: absolute;
background: url('images/ss.gif');
width: 145px;
height: 100%;
float:left;
}

div#Bottom{
margin-left:2px;
margin-bottom: 2px;
background: url('images/bottom.gif');
border-left: 1px #000000 solid;
border-bottom: 1px #333333 solid;
width: 802px;
height: 129px;
clear: both;
}

 

håper på en løsning, og hvis du ser andre feil i koden, vær så snill og si ifra :thumbup:

 

edit: jeg har ikke lagt siden opp enda...

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Gjest Slettet+142

Gjest Slettet+142

Skrevet
Skrevet (endret)
Tipper dette er en sak for faux columns :)

6517552[/snapback]

må si at dette her e noe eg har leitet etter en stund :thumbup:

 

men.. eg tror ikkje det e svar på problemet... eller?

Endret av Slettet+142
Lenke til kommentar
Gjest Slettet+142

Gjest Slettet+142

Skrevet
Skrevet
nei det var nok ikke problemet desverre  :dontgetit:

 

ingen andre som har noen ide om hva som kan gjøre det?

6518186[/snapback]

har samme problemet, og det forundrer meg at ingen klarer å hjelpe...:(

Lenke til kommentar
Gjest Slettet+142

Gjest Slettet+142

Skrevet
Skrevet
Det der kan du jo løse med faux columns, da.

6518228[/snapback]

kordan?

 

flexitid:

 

fikk en liten idé her no...

legg til body { height: 100% }

vet ikkje helt om det virker

Lenke til kommentar
Gjest Slettet+142

Gjest Slettet+142

Skrevet
Skrevet (endret)
Legg dette bildet i din wrapper-divisjon, eller sett en på body, med bakgrunnen sentrert. Lagra som jpg, jeg, vet ikke helt hvorfor, lag et likt bilde i GIF, du.

6518324[/snapback]

må si at eg ikkje helt skjønner det der med faux cloumns...

så.. hadde ikkje gjort noe om du hadde laget en kjapp kode...

 

men.. eg har prøvd litt med div.. prøver å bytte fra tabell til div.. men problemer:

post-96555-1153308152_thumb.jpg

 

irriterende at dette skjer... så.. altså... faux coloumns hjelper mot dette problemet?

Endret av Slettet+142
Lenke til kommentar
Probeus

Probeus

Skrevet
  • Forfatter
Skrevet
Legg dette bildet i din wrapper-divisjon, eller sett en på body, med bakgrunnen sentrert. Lagra som jpg, jeg, vet ikke helt hvorfor, lag et likt bilde i GIF, du.

6518324[/snapback]

 

Første gang jeg må si takk til bush :thumbup:

Lenke til kommentar
Gjest Slettet+142

Gjest Slettet+142

Skrevet
Skrevet (endret)
Legg dette bildet i din wrapper-divisjon, eller sett en på body, med bakgrunnen sentrert. Lagra som jpg, jeg, vet ikke helt hvorfor, lag et likt bilde i GIF, du.

6518324[/snapback]

 

Første gang jeg må si takk til bush :thumbup:

6518470[/snapback]

hvis du fikk det til....

kunne u vist meg koden, sånn som u gjorde i første innlegg?

 

George:

eg = *føler meg sååååååååå dum*

Skjult tekst: (Marker innholdet i feltet for å se teksten):

Har prøvd litt fram med flexitid sin kode:

 

min HTML:

<html><head>
<LINK REL="StyleSheet" href="style.css" type="text/css">
</head><body>

<div id="outer">
 <div id="inner">
   <div id="content">

   </div>
   <div id="menu">

   </div>
   <div class="cleared"> </div>
 </div>
 <div id="sidebar">

 </div>
 <div class="cleared"> </div>
</div>
<div id="bottom">

</div>

</body></html>

 

Min CSS:

* {
margin: 0 auto;
padding: 0px;
border: 0px;
text-align: center;
}

body {
background: #344432;
}

div#wrapper {
text-align: left;
border: 1px #000000 solid;
background: #5F7463;
width:808px;
margin-top: 50px;
min-height: 400px;
}

div#banner {
background: url('images/head.gif');
margin-top: 2px;
margin-right: 2px;
margin-left: 2px;
width:802px;
height: 176px;
border-top: 1px #000000 solid;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
}

div#logo {
text-align: left;
background: url('images/logo.gif');
margin-top: 0px;
width:300px;
height:85px;
float:middle;
padding-top: 50px;
}

div#meny {
text-align: left;
background: url('images/meny.gif');
margin-top: 120px;
width:101px;
height:281px;
float:left;
padding-top: 10px;
padding-left: 30px;
}

div#rightbanner{
background: url('images/right.gif');
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
margin-left: 2px;
min-height: 400px;
width: 145px;
float:left;
}



div#innholdimg {
margin-left: 16px;
margin-top: 10px;
width: 442px;
height: 17px;
float: left;
}


div#innhold {
text-align: left;
background: #5C8CA2;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
margin-left: 16px;
width: 442px;
height: 424px;
float:left;
repeat-y 0 50%
}


div#info {
text-align: left;
background: #5C8CA2;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
margin-right: 10px;
margin-left: 16px;
width: 168px;
height: 150px;
float: right;


}

div#infoimg {
margin-right: 10px;
margin-top: -17px;
width: 170px;
height: 17px;
float: right;
}

div.bunn {
margin-right: 10px;
height: 14px;
float: right;
margin-bottom: 30px;
}

div#extender{
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
margin-left: 2px;
margin-top: 410px;
position: absolute;
background: url('images/ss.gif');
width: 145px;
height: 100%;
float:left;
}

div#Bottom{
margin-left:2px;
margin-bottom: 2px;
background: url('images/bottom.gif');
border-left: 1px #000000 solid;
border-bottom: 1px #333333 solid;
width: 802px;
height: 129px;
clear: both;
}

 

 

e dette "riktig markup"? skjønner omtrent ingenting enkelte ganger... så sorry det... :no:

Endret av Slettet+142
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

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...