Problem med layout

harrir · 19. september 2007

Jeg har et problem. :hrm:

Det jeg holder på å lage en side med et tre-rades layout. Jeg snublet over layouten på min jakt etter vidsom og opplysning.

Problemet kom når jeg skulle nå skulle mekke in "tabs" som skal henge i toppen av midt raden.

Tingen er da at disse tabsene ikke vill langt nok opp. Jeg vill ha den til å henge helt opptil headeren, men den ligger hele tiden nedforbi.

Jeg har sjekket cssen og xhtmlen men jeg kan ikke finne ut hva som gjør det.

Noen som kan hjelpe?

CSS

Klikk for å se/fjerne innholdet nedenfor

@charset "utf-8";
/* CSS Document */

html, body {height:100%;}
body {
padding: 0;
margin:0;
background:#F8E7EC /*url(somepicture.png) repete-left top*/;
color: #000000;
}

#outer {
min-height: 100%;
margin-left:130px;
margin-right:130px;
background:white;
border-left:1px solid #000;
border-right:1px solid #000;
margin-bottom:-52px;
color: #000000;
}
* html #outer{height:100%;} /* IE6 and under treat height as min-height anyway*/

#header{
background:#FF0000;
border-top:1px solid #000;
border-bottom:1px solid #000;
color: #000;
text-align:center;
position:relative;
margin:0 -131px;
padding-top:76px;
min-height:0;/* ie 7 haslayout fix */

}
/* mac hide \*/
* html #header{height:56px;he\ight:1px}/* height needed for ie to force layout*/
/* end hide*/


#left {
position:relative;/*ie needs this to show float */
width:130px;/* same as the left margin on #outer*/
float:left;
margin-left:-129px;/*must be 1px less than width otherwise won't push footer down in older mozilla*/
left:-2px;/* push column into position*/
}
#left p {padding-left:2px;padding-right:2px}
#right p {padding-left:2px;padding-right:2px}

#right {
position:relative;/*ie needs this to show float */
width:130px;/* same as right margin on #outer*/
float:right;
margin-right:-129px;/*must be 1px less than width otherwise won't push footer down in older mozilla*/
left:2px;/* push column into position*/
}

#footer {
width:100%;
clear:both;
height:50px;
border-top:1px solid #000;
border-bottom:1px solid #000;
background-color: #FF8080;
color: #000000;
text-align:center;
position:relative;
}
* html #footer {/*only ie gets this style*/
\height:52px;/* for ie5 */
he\ight:50px;/* for ie6 */
}
#clearfooter{clear:both;height:40px;}/*needed to make room for footer*/
* html #centrecontent {height:1%;margin-bottom:12px}/* combat IE's 3 pixel jog */


/* Centermenu */

#navcontainer ul li
{
list-style-type: none;
padding: 0;
margin: 0;
display: block;
float: left;
background: url("") repeat-x 20px;
text-align: center;
}

#navcontainer a
{
color: #000;
text-decoration: none;
display: block;
width: 70px;
margin: 10px;
border-bottom: 1px solid #A8B090;
border-left: 1px solid #A8B090;
border-right: 1px solid #A8B090;
}

#navcontainer li#active { background: url("") repeat-x 20px; }
#navcontainer a:hover { background: url("") repeat-x 20px; }

/* Centermenu end */

XHTML

Klikk for å se/fjerne innholdet nedenfor

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Digitalt Bakkenett</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="outer">
<div id="header"> <p>Header - Centre column longest - footer at bottom of document.</p></div>
<div id="left"><p>Left Content goes here : </p></div>
<div id="right"><p>Right content goes here : </p></div>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
<div id="centrecontent">

<p>Centre Content goes here</p></div>
<div id="clearfooter"></div><!-- to clear footer -->
</div><!-- end outer div -->
<div id="footer"> -Footer -</div>
</body>
</html>

og linken: http://www.easylivingmusic.com/dbn/index.php

Bare ikke mas om designet. Jeg vet det ser helt forferdelig ut, men har ikke kommet til den delen ennå.

Har litt liten tid så rask tilbakemelding vill bli satt pris på.

Kim T · 19. september 2007

* {
margin: 0;
padding: 0;
}

I toppen av CSS filen din. Så sjekk hva som skjer

harrir · 19. september 2007

Takk. Det hjalp litt, men er ennå ikke helt inntil header-borderen.

Noen ideer?

Stian Jacobsen · 19. september 2007

Klikk for å se/fjerne innholdet nedenfor

Jeg har et problem. :hrm:

Det jeg holder på å lage en side med et tre-rades layout. Jeg snublet over layouten på min jakt etter vidsom og opplysning.

Problemet kom når jeg skulle nå skulle mekke in "tabs" som skal henge i toppen av midt raden.

Tingen er da at disse tabsene ikke vill langt nok opp. Jeg vill ha den til å henge helt opptil headeren, men den ligger hele tiden nedforbi.

Jeg har sjekket cssen og xhtmlen men jeg kan ikke finne ut hva som gjør det.

Noen som kan hjelpe?

CSS

Klikk for å se/fjerne innholdet nedenfor

@charset "utf-8";
/* CSS Document */

html, body {height:100%;}
body {
padding: 0;
margin:0;
background:#F8E7EC /*url(somepicture.png) repete-left top*/;
color: #000000;
}

#outer {
min-height: 100%;
margin-left:130px;
margin-right:130px;
background:white;
border-left:1px solid #000;
border-right:1px solid #000;
margin-bottom:-52px;
color: #000000;
}
* html #outer{height:100%;} /* IE6 and under treat height as min-height anyway*/

#header{
background:#FF0000;
border-top:1px solid #000;
border-bottom:1px solid #000;
color: #000;
text-align:center;
position:relative;
margin:0 -131px;
padding-top:76px;
min-height:0;/* ie 7 haslayout fix */

}
/* mac hide \*/
* html #header{height:56px;he\ight:1px}/* height needed for ie to force layout*/
/* end hide*/


#left {
position:relative;/*ie needs this to show float */
width:130px;/* same as the left margin on #outer*/
float:left;
margin-left:-129px;/*must be 1px less than width otherwise won't push footer down in older mozilla*/
left:-2px;/* push column into position*/
}
#left p {padding-left:2px;padding-right:2px}
#right p {padding-left:2px;padding-right:2px}

#right {
position:relative;/*ie needs this to show float */
width:130px;/* same as right margin on #outer*/
float:right;
margin-right:-129px;/*must be 1px less than width otherwise won't push footer down in older mozilla*/
left:2px;/* push column into position*/
}

#footer {
width:100%;
clear:both;
height:50px;
border-top:1px solid #000;
border-bottom:1px solid #000;
background-color: #FF8080;
color: #000000;
text-align:center;
position:relative;
}
* html #footer {/*only ie gets this style*/
\height:52px;/* for ie5 */
he\ight:50px;/* for ie6 */
}
#clearfooter{clear:both;height:40px;}/*needed to make room for footer*/
* html #centrecontent {height:1%;margin-bottom:12px}/* combat IE's 3 pixel jog */


/* Centermenu */

#navcontainer ul li
{
list-style-type: none;
padding: 0;
margin: 0;
display: block;
float: left;
background: url("") repeat-x 20px;
text-align: center;
}

#navcontainer a
{
color: #000;
text-decoration: none;
display: block;
width: 70px;
margin: 10px;
border-bottom: 1px solid #A8B090;
border-left: 1px solid #A8B090;
border-right: 1px solid #A8B090;
}

#navcontainer li#active { background: url("") repeat-x 20px; }
#navcontainer a:hover { background: url("") repeat-x 20px; }

/* Centermenu end */

XHTML

Klikk for å se/fjerne innholdet nedenfor

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Digitalt Bakkenett</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="outer">
<div id="header"> <p>Header - Centre column longest - footer at bottom of document.</p></div>
<div id="left"><p>Left Content goes here : </p></div>
<div id="right"><p>Right content goes here : </p></div>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
<div id="centrecontent">

<p>Centre Content goes here</p></div>
<div id="clearfooter"></div><!-- to clear footer -->
</div><!-- end outer div -->
<div id="footer"> -Footer -</div>
</body>
</html>

og linken: http://www.easylivingmusic.com/dbn/index.php

Bare ikke mas om designet. Jeg vet det ser helt forferdelig ut, men har ikke kommet til den delen ennå.

Har litt liten tid så rask tilbakemelding vill bli satt pris på.

9526094[/snapback]

Legg "navcontainer" rett etter "header", så bruker du "clear: left" på "navcontainer"

Tror det skal hjelpe, har ikke sett på kildekoden din, bare på siden..

harrir · 19. september 2007

Klikk for å se/fjerne innholdet nedenfor

Jeg har et problem. :hrm:

Det jeg holder på å lage en side med et tre-rades layout. Jeg snublet over layouten på min jakt etter vidsom og opplysning.

Problemet kom når jeg skulle nå skulle mekke in "tabs" som skal henge i toppen av midt raden.

Tingen er da at disse tabsene ikke vill langt nok opp. Jeg vill ha den til å henge helt opptil headeren, men den ligger hele tiden nedforbi.

Jeg har sjekket cssen og xhtmlen men jeg kan ikke finne ut hva som gjør det.

Noen som kan hjelpe?

CSS

Klikk for å se/fjerne innholdet nedenfor

@charset "utf-8";
/* CSS Document */

html, body {height:100%;}
body {
padding: 0;
margin:0;
background:#F8E7EC /*url(somepicture.png) repete-left top*/;
color: #000000;
}

#outer {
min-height: 100%;
margin-left:130px;
margin-right:130px;
background:white;
border-left:1px solid #000;
border-right:1px solid #000;
margin-bottom:-52px;
color: #000000;
}
* html #outer{height:100%;} /* IE6 and under treat height as min-height anyway*/

#header{
background:#FF0000;
border-top:1px solid #000;
border-bottom:1px solid #000;
color: #000;
text-align:center;
position:relative;
margin:0 -131px;
padding-top:76px;
min-height:0;/* ie 7 haslayout fix */

}
/* mac hide \*/
* html #header{height:56px;he\ight:1px}/* height needed for ie to force layout*/
/* end hide*/


#left {
position:relative;/*ie needs this to show float */
width:130px;/* same as the left margin on #outer*/
float:left;
margin-left:-129px;/*must be 1px less than width otherwise won't push footer down in older mozilla*/
left:-2px;/* push column into position*/
}
#left p {padding-left:2px;padding-right:2px}
#right p {padding-left:2px;padding-right:2px}

#right {
position:relative;/*ie needs this to show float */
width:130px;/* same as right margin on #outer*/
float:right;
margin-right:-129px;/*must be 1px less than width otherwise won't push footer down in older mozilla*/
left:2px;/* push column into position*/
}

#footer {
width:100%;
clear:both;
height:50px;
border-top:1px solid #000;
border-bottom:1px solid #000;
background-color: #FF8080;
color: #000000;
text-align:center;
position:relative;
}
* html #footer {/*only ie gets this style*/
\height:52px;/* for ie5 */
he\ight:50px;/* for ie6 */
}
#clearfooter{clear:both;height:40px;}/*needed to make room for footer*/
* html #centrecontent {height:1%;margin-bottom:12px}/* combat IE's 3 pixel jog */


/* Centermenu */

#navcontainer ul li
{
list-style-type: none;
padding: 0;
margin: 0;
display: block;
float: left;
background: url("") repeat-x 20px;
text-align: center;
}

#navcontainer a
{
color: #000;
text-decoration: none;
display: block;
width: 70px;
margin: 10px;
border-bottom: 1px solid #A8B090;
border-left: 1px solid #A8B090;
border-right: 1px solid #A8B090;
}

#navcontainer li#active { background: url("") repeat-x 20px; }
#navcontainer a:hover { background: url("") repeat-x 20px; }

/* Centermenu end */

XHTML

Klikk for å se/fjerne innholdet nedenfor

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Digitalt Bakkenett</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="outer">
<div id="header"> <p>Header - Centre column longest - footer at bottom of document.</p></div>
<div id="left"><p>Left Content goes here : </p></div>
<div id="right"><p>Right content goes here : </p></div>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
<div id="centrecontent">

<p>Centre Content goes here</p></div>
<div id="clearfooter"></div><!-- to clear footer -->
</div><!-- end outer div -->
<div id="footer"> -Footer -</div>
</body>
</html>

og linken: http://www.easylivingmusic.com/dbn/index.php

Bare ikke mas om designet. Jeg vet det ser helt forferdelig ut, men har ikke kommet til den delen ennå.

Har litt liten tid så rask tilbakemelding vill bli satt pris på.

9526094[/snapback]

Legg "navcontainer" rett etter "header", så bruker du "clear: left" på "navcontainer"

Tror det skal hjelpe, har ikke sett på kildekoden din, bare på siden..

9526192[/snapback]

Det hjalp dessverre ikke.

Kim T · 19. september 2007

#navcontainer a
{
color: #000;
text-decoration: none;
display: block;
width: 70px;
/* margin: 10px; <--- denne må forandres? */ 
margin-left: 10px
margin-right: 10px;
margin-bottom: 10px;
margin-top: 0px;
border-bottom: 1px solid #A8B090;
border-left: 1px solid #A8B090;
border-right: 1px solid #A8B090;
}

harrir · 19. september 2007

#navcontainer a
{
color: #000;
text-decoration: none;
display: block;
width: 70px;
/* margin: 10px; <--- denne må forandres? */ 
margin-left: 10px
margin-right: 10px;
margin-bottom: 10px;
margin-top: 0px;
border-bottom: 1px solid #A8B090;
border-left: 1px solid #A8B090;
border-right: 1px solid #A8B090;
}

9526273[/snapback]

Se det. Det gjorde seg godt. Nå må jeg bare få teksta til å komme under tabsene.

Kim T · 19. september 2007

<div id="outer">

<div id="header"> 
                  <p>Header - Centre column longest - footer at bottom of document.</p></div>
            <div id="left"><p>Left Content goes here : </p></div>
            <div id="right"><p>Right content goes here : </p></div>

<!-- Denne div'en kan strengt tatt kuttes ut -->
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
<div id="centrecontent"><!-- Denne linjen ville jeg ha flyttet over <ul id="navlist"> -->

<!-- Så må du lage en "clearer" -->

<div class="clearer"></div>
<p>Centre Content goes here</p>

</div>
<div id="clearfooter"></div><!-- to clear footer -->
</div><!-- end outer div -->
<div id="footer"> -Footer -</div>

Så må du lage en egen CSS regel for "clearer":

.clearer {
line-height: 0;
clear: both;
width: 100%; /* litt usikker på om du faktisk trenger denne */
}

Tror dette er løsningen. :hmm:

EDIT: La til width på "clearer".

Kim...

Endret 19. september 2007 av kimthoma

harrir · 19. september 2007

<div id="outer">

<div id="header"> 
                  <p>Header - Centre column longest - footer at bottom of document.</p></div>
            <div id="left"><p>Left Content goes here : </p></div>
            <div id="right"><p>Right content goes here : </p></div>

<!-- Denne div'en kan strengt tatt kuttes ut -->
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
<div id="centrecontent"><!-- Denne linjen ville jeg ha flyttet over <ul id="navlist"> -->

<!-- Så må du lage en "clearer" -->

<div class="clearer"></div>
<p>Centre Content goes here</p>

</div>
<div id="clearfooter"></div><!-- to clear footer -->
</div><!-- end outer div -->
<div id="footer"> -Footer -</div>

Så må du lage en egen CSS regel for "clearer":

.clearer {
line-height: 0;
clear: both;
width: 100%; /* litt usikker på om du faktisk trenger denne */
}

Tror dette er løsningen. :hmm:

EDIT: La til width på "clearer".

Kim...

9526485[/snapback]

Det kan jo funke.

Jeg mekka litt imens jeg venta. Fikk det hele til ved å legge til "clear:both" på "centrecontent".

Det så ut til å fungere med det og mindre arbeid en ditt forslag.

Men du skal ha tusen takk for all hjelp!

Logg inn

Problem med layout

Anbefalte innlegg

harrir

Lenke til kommentar

Videoannonse

Kim T

Lenke til kommentar

harrir

Lenke til kommentar

Stian Jacobsen

Lenke til kommentar

harrir

Lenke til kommentar

Kim T

Lenke til kommentar

harrir

Lenke til kommentar

Kim T

Lenke til kommentar

harrir

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Populær nå

Russlands invasjon av Ukraina [Ny tråd, les førstepost] 1 2 3 4 3748

Hvem er aktive 0 medlemmer