Gå til innhold

CSS Overlapping


Anbefalte innlegg

Jeg trenger litt hjelp med å få slutt på overlapping. Problemet er at når jeg resizer så går høyre firekant over miderste firekant, noe som jeg ikke vil. Det jeg vil er at når jeg resizer og høyre firekant treffer midersta firekant så stopper den og en scrollbar kommer frem isteden.

 

Her er koden (funker ikke så bra i IE, passe bra i Opera og best i Mozilla):

 

body {

margin: 10px;

padding: 0px;

}

#header

{

height: 100px;

border: 1px solid #000;

min-width: 600px;

}

#left {

position: absolute;

top: 112px;

left: 0px;

margin-left: 10px;

border: 1px solid #000;

min-height: 200px;

width: 150px;

}

#center {

min-height: 200px;

margin-left: 150px;

margin-right: 150px;

border: 1px solid #000;

min-width: 300px;

}

#right {

position: absolute;

top: 112px;

right: 0px;

margin-right: 10px;

border: 1px solid #000;

min-height: 200px;

width: 150px;

}

 

Edit: Jeg ga dere feil kode, sorry :blush:

Håper dere vil forsatt hjelpe meg

Endret av inzyr
Lenke til kommentar
Videoannonse
Annonse

Er det ikke det man bruker float: left og float: right for da? Jeg har aldri hatt problemer med dette, men det er vel kanskje fordi jeg alltid har hatt bakgrunnsbilder som hindrer dette. Nå ble jeg veldig usikker...

 

Grunnen til at det ikke funker så bra i IE er vel at IE ikke takler min-height, men bare height osv...

Lenke til kommentar

om du skal ha scrollbar (aka rullefortau/heis), så bruk

overflow: auto;

Så slipper du at det er scroll der når den ikke trengs.. (for den kommer både horisontalt og verticalt.. ;) )

 

 

edit> gelmte en ; der... :blush:

Endret av cfenzo
Lenke til kommentar
Ok, jeg greier ikke å få det til med float. Har prøvd, men forstår ikke helt hvordan. Hele layouten blir ødelagt hvis jeg bruker float.

Prinsippet med float er å bestemme korleis oppsettet ditt skal "flyte". Setter du float: left; på et element, vil elementet legge seg så nært venstrekant av elementet over som mulig, om det er plass til det i skjermbildet (bredden). Ellers vil det havne under, og vere akkurat som uten float.

 

Å lære seg å bruke floats kan vere vanvittig praktisk.

 

http://www.thenoodleincident.com/tutorials...sson/boxes.html <= nyttig for å lære seg å lage enkle grunnoppsett :)

Lenke til kommentar
En side-effekt av float, er at elementene blir akkurat så store som de trenger, altså ingen dødplass... til det må du da sette masse margins / paddings osv...

Gjelder vel strengt tatt alle elementer. Uten bruk av padding, margin, width, height egenskapane vil elementa bli nøyaktig så store som dei har behov for...

Lenke til kommentar

Nå har jeg prøvd med float, med background, med position absolute og z-index, men ingenting ser ut til å virke. Jeg greier det bare ikke :(

Finnes det ingen "No Overlapping" tag som bare stopper den og gir meg en scroll bar istede?

Lenke til kommentar

Her er en test siden online:

Link

 

og HTML koden:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

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

<title>Test-side</title>

</head>

<body>

<div id="header">header</div>

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

<div id="center">center</div>

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

</body>

</html>

 

Edit: Som sagt, så har jeg ikke fokusert på browser compability. Den fungere best i Mozilla, passe bra i Opera og dårligst i IE

Endret av inzyr
Lenke til kommentar

Nå har jeg ved hjelp av tables laget det slik jeg vil ha det (fungere ikke i mozilla):

Link

Høyre kolonne stopper opp når den møtter minimum bredden. Det er noe slik jeg vil ha, men uten å bruke tables, bare CSS.

Lenke til kommentar

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å
  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...