Jump to content
Sign in to follow this  
Noot

Trøbbel med flytende div.

Recommended Posts

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.

Edited by ex0n

Share this post


Link to post

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:

post-76-1126388816_thumb.png

Share this post


Link to post
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.

Edited by ex0n

Share this post


Link to post
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?

post-76-1126396319_thumb.png

Edited by Amnio

Share this post


Link to post
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*

Share this post


Link to post

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

Share this post


Link to post

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...