css-problem Design for web

2. mai 2008

okei, da har jeg støtt på nok ett problem jeg trenger hjelp til.
Forhåpentligvis er det kun snakk om en liten korrigering i css-koden min.

Jeg har laget ett kjapp tegning i paint for å illustrere problemet. (se vedlegg)

Problemet er at teksten i div-taggen #main henger langt nedenfor. Jeg vil at den hvite bakgrunnen skal følge med. skjønner?

Her er css-koden:

body {
background: url(bakgrunn.gif);
text-align:center;
font-size:12px;
margin: 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

#header {
margin:0 px auto;
background:#1E7BA8;
background: url(banner.png);
width:750px;
height:200px;
margin-bottom:15px;
}

#main {
background:#FFFFFF;
padding:5px;
padding-top:0px;
text-align:left;
margin: 0px auto;
width:750px;
height:100%;
border-right:4px solid #e4e3e2;
border-left:4px solid #e4e3e2;
}

table.one
{
table-layout: automatic
}
table.two
{
table-layout: fixed
}

#text {
float:right;
padding-left:15px;
padding-right:5px;
text-align:left;
margin: 0px auto;
width:500px;

}
#text h1 {
font-size:18px;
font-weight:normal;
background:#9a9998;
padding:4px;
border:1px solid #000000;
width:300px;
color:#000000;
}

.arrowlistmenu{
width: 180px;
}

.arrowlistmenu .headerbar{
font: bold 14px Arial;
color: white;
background:000000;
margin-bottom: 10px;
text-transform: uppercase;
padding: 4px 0 4px 10px;
}

.arrowlistmenu ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px;
}

.arrowlistmenu ul li{
padding-bottom: 2px;
}

.arrowlistmenu ul li a{
color: #A70303;
background:ffffff;
display: block;
padding: 2px 0;
padding-left: 19px;
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}

.arrowlistmenu ul li a:visited{
color: #A70303;
}

.arrowlistmenu ul li a:hover{
color: #A70303;
background-color: #F3F3F3;
}

Pjukern

Sikkerhetsklarert

2.471 332

2. mai 2008

Har du main div`n inne i en wrapper div?
En stygg måte å gjøre det på er jo å sette height i px.

Post gjerne html`n din også.

ma10as

990 198

2. mai 2008

Det er umulig å hjelpe deg uten HTML-kodene, men om jeg skal gjette, så tipper jeg at du har glemt å legge til clear: both etter float-elementene?

mikkelrev

Trådstarter

16 0

2. mai 2008

<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Juliet Productions</title>
</head>
<body>

<div id="main">

<a href="index.htm"><div id="header"></div></a>

<div id="text">
<h1>VELKOMMEN TIL JULIET PRODUCTIONS</h1>
<div id="lipsum">

<hr style="width:300px;" size="1" align="left" />

</div>
</div>

<div class="arrowlistmenu">

<h3 class="headerbar">MENY</h3>
<ul>
<li><a href="Nyheter.htm">Filmen</a></li>
<li><a href="Nyheter.htm">Zipp</a></li>
<li><a href="Diskografi.htm">Kong Blupp</a></li>
<li><a href="Biografi.htm">Bilder</a></li>
<li><a href="Turneplan.htm">Spill</a></li>
<li><a href="Media.htm">Nedlastninger</a></li>
<li><a href="juliet.htm">Juliet Productions</a></li>
</ul>

</div>

</body>
</html>

Der er html-koden.

Pjukern

Sikkerhetsklarert

2.471 332

2. mai 2008

Hvilken div er det du bruker til innholdet?
#main ser ut til å være en wrapper
#tekst er tekst i header.

Du trenger en ny div som du plasserer der du vil ha teksten.

z0p

uʍop ǝpısdn

3.814 906

2. mai 2008

ma10as har nok rett her. Dette er et vanlig problem å støtte på med flere kollonner i et layout, og kan som sies løses ved å legge til clear:both etter kollonnene.

Du kan også gjøre en del for å optimalisere css-koden din

Header kan være en img-tag med korrekt høyde og bredde
main width trengs og bør bare settes ett sted
Skill font/text properties og element style
Strukturer, strukturer, strukturer
Tenk på arv

Have a nice day codin'

mikkelrev

Trådstarter

16 0

2. mai 2008

har innholdet i #main.

Har du tid til å vise meg?(A)

ma10as

990 198

2. mai 2008

Sitat av mikkelrev

Har du tid til å vise meg?(A)

Vis hele sitatet...

http://pastebin.uflax.net/index.php?id=151&linjenr=nei

Her har jeg (dreamweaver) lagt til doctype og en mer fyldig head-er. Jeg har også laget en div (wrapper) som holder på alt innholdet ditt. Dessuten er koden mer ryddig nå, og er satt sammen på en mer logisk måte.

z0p

uʍop ǝpısdn

3.814 906

2. mai 2008

En rimelig standard mal for dette er vel noe sånt som:

Kode

#main {
  settings..
}
#header {
  settings..
}
#menu{
  float:left; 
  settings..
}
#text {
  float: right;
  settings..
}
#footer {
  clear:both;
  settings..
}

Kode

<div id="main">
<div id="header">header</div>
<div id="menu">menu</div>
<div id="text">text</div>
<div id="footer">footer</div>
</div>

mikkelrev

Trådstarter

16 0

2. mai 2008

Sitat av ma10as

http://pastebin.uflax.net/index.php?id=151&linjenr=nei

Vis hele sitatet...

Ligger html-koden og css-koden sammen her?
Beklager ett mulig dumt spørsmål, men jeg har jo 2 forskjellige filer, 1 html og 1 css.

ma10as

990 198

2. mai 2008

Sitat av mikkelrev

Ligger html-koden og css-koden sammen her?
Beklager ett mulig dumt spørsmål, men jeg har jo 2 forskjellige filer, 1 html og 1 css.

Vis hele sitatet...

Ja, jeg samlet de sånn at jeg kunne legge alt i pastebin. Det er ikke noe problem å klippe ut CSS-delen og legge det til en ekstern fil.

mikkelrev

Trådstarter

16 0

2. mai 2008

skjønner

Hjertlig tusen takk for hjelp!

▼ ... noen uker senere ... ▼

surre

540 18

26. mai 2008

Har et lite problem med dreamweaver. Finner sikkert svaret på et søk på google, men har ikke peiling på css, å hva jeg skal søke på.

Har laget knapper på siden som jeg linker til andre sider med. Da kommer det standard blåstrekene rundt. Hvordan fjerner jeg de? Gikk på page properties og forandra fargen på link colors, men dette funka bare på firefox og opera.

ma10as

990 198

26. mai 2008

Har du laget disse knappene med img-tagen? Hvis tilfelle, kan du fjerne den med denne CSS-koden:

Kode

a img { 
  border: none;
}

Strek under vanlige linker fjerner du med text-decoration:

Kode

a { 
  text-decoration: none;
}

surre

540 18

26. mai 2008

Var med img-tagen ja. takk for svar