Trøbbel med flytende div.

10. september 2005

Påan igjen.

Sitter og kjeder meg, og når jeg kjeder meg blir det koding.

Når man koder kommer det alltid opp ett eller annet problem.

Se på dette:

Bilde

Den diven helt til høyre legger seg litt ned samme hva jeg gjør. enten den har float: left eller right.

HTML: (se neste innlegg)

CSS:

* {
margin: 0;
padding: 0;
}
body {
background-color: #2e4863;
font-family: Verdana, Tahoma, Arial;
font-size: 10pt;
height: 100%;
}
h1 {
font-family: Verdana, Tahoma, Arial;
font-size: 12pt;
}
h2 {
font-family: Verdana, Tahoma, Arial;
font-size: 8pt;
}
p {
margin-bottom: 5px;
}
#wrap {
width: 600px;
height: 600px;
margin: 10px auto;
text-align: left;
}
#top-wrap {
width: 600px;
height: 20px;
float: left;
}
#middle-wrap {
width: 600px;
height: 560px;
float: left;
}
#bottom-wrap {
width: 600px;
height: 20px;
float: left;
}
#top-left {
width: 20px;
height: 20px;
float: left;
background: url(border/top-left.png) no-repeat;
}
#top {
width: 560px;
height: 20px;
float: left;
background: url(border/top.png) repeat-x;
}
#top-right {
width: 20px;
height: 20px;
float: left;
background: url(border/top-right.png) no-repeat;
}
#left {
width: 20px;
height: 560px;
float: left;
background: url(border/left.png) repeat-y;
}
#right {
width: 20px;
height: 560px;
float: left;
background: url(border/right.png) repeat-y;
}
#bottom-left {
width: 20px;
height: 20px;
float: left;
background: url(border/bottom-left.png) no-repeat;
}
#bottom {
width: 560px;
height: 20px;
float: left;
background: url(border/bottom.png) repeat-x;
}
#bottom-right {
width: 20px;
height: 20px;
float: left;
background: url(border/bottom-right.png) no-repeat;
}
#head {
background: #ffffff;
width: 560px;
height: 60px;
float: left;
text-align: center;
}
#content {
width: 560px;
height: 500px;
background: #ffffff;
text-align: left;
float: left;
}
a {
font-family: verdana;
text-decoration: none;
color: #000000;
}
a:hover {
font-family: verdana;
text-decoration: none;
color: green;
}

Noen som ser noe feil?

(Bah, forumet liker ikke TAB :thumbdown: )

EDIT: Stort bilde.

Endret 10. september 2005 av Slettet+6132

Amnio · 10. september 2005

Det er ikke relatert til problemet ditt, men det er noe finurlig som foregår i denne delen av koden din:

<p>
<b> Network Load <small>(GW)</small>:</b><br/>

<img src="</span>" alt="NetLoad Day"/>

<<span style='color:blue'>/p>

Span har to < forann. Den ene /span skal kanskje flyttes ned ei linje da span ikke er avsluttet. /p mangler en <.

Vet ikke hva som forårsaker problemet ditt, men jeg vet en måte du kan fikse det på. Avslutt middle-wrap før du legger på <div id="right"></div>, fjern så 20px fra middle-wraps bredde og du er i mål. Hadde ikke bildene dine, men slik ser altså resultatet ut:

10. september 2005

Det er ikke relatert til problemet ditt, men det er noe finurlig som foregår i denne delen av koden din:
<p>
<b> Network Load <small>(GW)</small>:</b><br/>

<img src="</span>" alt="NetLoad Day"/>

<<span style='color:blue'>/p>

Span har to < forann. Den ene /span skal kanskje flyttes ned ei linje da span ikke er avsluttet. /p mangler en <.

Vet ikke hva som forårsaker problemet ditt, men jeg vet en måte du kan fikse det på. Avslutt middle-wrap før du legger på <div id="right"></div>, fjern så 20px fra middle-wraps bredde og du er i mål. Hadde ikke bildene dine, men slik ser altså resultatet ut:

Humm, forumet leker med koden min! Den koden som står skrevet ovenfor er jo feil. Buggy?

Slik ser det egentlig ut:

<!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" lang="en" xml:lang="en">

<head>

<title>x</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" href="style.css" type="text/css" media="all" />

</head>

<body>

<div id="wrap">

<div id="top-wrap">

<div id="top-left"></div>

<div id="top"></div>

<div id="top-right"></div>

</div>

<div id="middle-wrap">

<div id="left"></div>

<div id="head">

<h1>x.lan</h1>

<h2>x</h2>

</div>

<div id="content">

<p>

<b> Router:</b><br/>

  <a href="http://x/" target="_blank">Webconfig</a><br/>

  <a href="http://x/" target="_blank">phpMyAdmin</a><br/>

  <a href="http://x/" target="_blank">Systeminfo</a>

</p>

<p>

<b> Web1:</b><br/>

  <a href="http://x/" target="_blank">Rootdir</a><br/>

  <a href="http://x/" target="_blank">Systeminfo</a><br/>

  <a href="http://x/" target="blank">phpMyAdmin</a><br/>

  <a href="http://x/" target="_blank">MRTG</a><br/>

  <a href="http://x/" target="_blank">Webmail</a>

</p>

<p>

<b> Annet:</b><br/>

  <a href="http://x/" target="_blank">Filmdatabase</a><br/>

  <a href="http://x/" target="_blank">TV-Guide</a>

</p>

<p>

<b> Uptime <small>(Web1 + GW)</small>:</b><br/>

   00:28:40 up 9 days, 4:59, 0 users, load average: 0.05, 0.03, 0.00<br/>

   00:28:38 up 9 days, 5:04, 0 users, load average: 0.00, 0.02, 0.00

</p>

<p>

<b> Network Load <small>(GW)</small>:</b><br/>

<img src="http://x" alt="NetLoad Day"/>

</p>

</div>

<div id="right"></div>

</div>

<div id="bottom-wrap">

<div id="bottom-left"></div>

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

<div id="bottom-right"></div>

</div>

</div>

</body>

</html>

EDIT: Koden min er rett, det er bare et eller annet med CSSen som bugger.

Endret 10. september 2005 av Slettet+6132

Amnio · 10. september 2005

EDIT: Koden min er rett, det er bare et eller annet med CSSen som bugger.

Ikke helt, problemet ligger i bruken av float. Se på bildet under. Du floater et element som du kaller "head" (markert som 1 på bildet) mot venstre, denne legger seg inntil "left" for den effekten du var ute etter. Du floater så content (2) mot venstre, denne får ikke plass rett til høyre for 1 da den i såfall ville skli utenfor middle-wrap, den hopper dermed 60px lenger ned før den får plass. Cursoren er dermed 60px lenger ned når "right" (3) får ordre om å flyte mot venstre, denne har ingen problemer med dette, men havner altså ikke på den plassen du forventet. For å fikse dette, legg "head" inne i "content" som dette:

<div id="middle-wrap">
<div id="left"></div>

<div id="content">

<div id="head">

<h1>x.lan</h1>

<h2>x</h2>

</div>

<p>

[osv....]

Gjør så om css til å utvide content med 60px til "height: 560px;". Du er da i mål og siden burde se som ønsket ut.

Edit: Eller prøv det jeg foreslo i innlegget forrut. Det funker også, men er kanskje ikke fullt så elegant... Er det ikke utrolig irriterende at CODE fjerner indent slik at det blir totalt håpløst å lese kode?

Endret 10. september 2005 av Amnio

11. september 2005

Ikke helt, problemet ligger i bruken av float. Se på bildet under. Du floater et element som du kaller "head" (markert som 1 på bildet) mot venstre, denne legger seg inntil "left" for den effekten du var ute etter. Du floater så content (2) mot venstre, denne får ikke plass rett til høyre for 1 da den i såfall ville skli utenfor middle-wrap, den hopper dermed 60px lenger ned før den får plass. Cursoren er dermed 60px lenger ned når "right" (3) får ordre om å flyte mot venstre, denne har ingen problemer med dette, men havner altså ikke på den plassen du forventet. For å fikse dette, legg "head" inne i "content" som dette:
<div id="middle-wrap">
<div id="left"></div>

<div id="content">

<div id="head">

<h1>x.lan</h1>

<h2>x</h2>

</div>

<p>

[osv....]

Gjør så om css til å utvide content med 60px til "height: 560px;". Du er da i mål og siden burde se som ønsket ut.

Edit: Eller prøv det jeg foreslo i innlegget forrut. Det funker også, men er kanskje ikke fullt så elegant... Er det ikke utrolig irriterende at CODE fjerner indent slik at det blir totalt håpløst å lese kode?

Jippi, det funka! Takk takk. :yes:

Ang. CODE-taggene, det er utrolig irriterende. Mister jo hele meningen med selve taggen. *kaste en sur sokk på IPB-koderne*

Christian. · 11. september 2005

Det er en feil med en link også men tviler den har noe betydning for utsenedt men sider den uansett.

<a href="http://x/" target="blank">phpMyAdmin</a><br/>

skal være

<a href="http://x/" target="_blank">phpMyAdmin</a><br/>

11. september 2005

...

Bare en glipp, hadde ikke noe med utseende å gjøre.

Christian. · 11. september 2005

Bare en glipp, hadde ikke noe med utseende å gjøre.

Var det jeg tenkte men bare sa ifra

Logg inn

Trøbbel med flytende div.

Anbefalte innlegg

Gjest Slettet+6132

Videoannonse

Amnio

Gjest Slettet+6132

Amnio

Gjest Slettet+6132

Christian.

Gjest Slettet+6132

Christian.

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer