Gå til innhold

Problem med layout

harrir

Av harrir
i Programmering og webutvikling

Anbefalte innlegg

harrir

harrir

Skrevet
Skrevet

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å.

Videoannonse

Videoannonse
Annonse
Stian Jacobsen

Stian Jacobsen

Skrevet
Skrevet

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

harrir

Skrevet
  • Forfatter
Skrevet
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

Kim T

Skrevet
Skrevet 
#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

harrir

Skrevet
  • Forfatter
Skrevet 
#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

Kim T

Skrevet
Skrevet (endret) 

<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 av kimthoma
harrir

harrir

Skrevet
  • Forfatter
Skrevet 
<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!

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...