Gå til innhold

Trenger hjelp til faux columns

Tha_Zaynt

Anbefalte innlegg

Tha_Zaynt

Tha_Zaynt

Skrevet
Skrevet

Jeg har prøvd meg litt på faux columns på en side der jeg skal ha 3 kolonnes layout, men får det ikke til. Jeg har laget en wrap-div med et bilde som repeterer seg me y-aksen og lagt alle tre div'ene som skal utgjøre de tre kolonnene inni wrap'en. problemet er at jeg ikke kan bruke float, for da vil wrap'en rundt collapse.

Hvis noen hadde giddet åsett på siden hadde jeg vært takknemmelig

 

link til side:

http://nisselink.sjurvaage.com/YaHons/new/index.php

 

link til css:

CSS

 

mvh.

 

Steinar Andersen

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
N*

N*

Skrevet
Skrevet

lag et element i bunnen med egenskapen clear:both; så kollapser ikke wrap'en.

 

f.eks

 

<p id="notis">Alt innhold tilhører Tha_Zaynt</p>

 

p#notis {

clear:both;

height:20px;

width:såmyeatdenfyllerhelebreddeni#wrap;

}

Lenke til kommentar
Tha_Zaynt

Tha_Zaynt

Skrevet
  • Forfatter
Skrevet

ok, det funka. La en hr med visibility:hidden i bunnen, men nå er problemet at kolonnen til høyre legger seg under #mid_column...jeg har lagt en border rundt den for å le om den er for bred, men det virker ikke sånn. Noen som vet hva som er galt?

Lenke til kommentar
Jesper Karsrud

Jesper Karsrud

Skrevet
Skrevet

Husk at margin og borders blir plusset på bredden på elementene dine, så en div med 100px width, 5px margin og 2px border blir 114px bred :)

 

Tok meg den frihet å live-edite CSS'en din, og hvis du endrer mid-column til dette, fungerer det :)

#mid_column {
background: #FFFFFF;
font-family: Arial,Helvetica,sans-serif;
font-size: 0.8em;
color: #444444;
line-height: 150%;
width: 460px;
padding: 10px;
float: left;
text-align: left;
border: 1px solid;
}

Lenke til kommentar
Tha_Zaynt

Tha_Zaynt

Skrevet
  • Forfatter
Skrevet (endret)

yes, det funka vettu! takk skal du ha, men vet du hvorfor #right_column legger seg under #top og ikke i toppen på siden?

 

EDIT; Jeg har også vært takknemmelig dersom noen kunne fortelle meg hvorfor top-div'en er sentrert i IE.

Endret av Tha_Zaynt
Lenke til kommentar
DevN

DevN

Skrevet
Skrevet
EDIT; Jeg har også vært takknemmelig dersom noen kunne fortelle meg hvorfor top-div'en er sentrert i IE.

Pga "text-align: center". Vet ikke hvilken funksjon den har på siden, men hvis den ikke kan fjernes, kan du vel sette "text-align: left" på wrappen, eller eventuelt en ny parent-kontroll for toppen.

 

Det andre problemet har jeg ikke tid til å se på nå. :hrm:

Lenke til kommentar
Tha_Zaynt

Tha_Zaynt

Skrevet
  • Forfatter
Skrevet

Text-align:center i body har i funksjon å midt stille siden. Det funka å sette text-align-left i wrappen ja, at jeg ikke tenkte på det :blush:

 

dat var det bare et problem igjen, å få #right_column til å legge seg i toppen av siden ved siden av #top.

Lenke til kommentar
DevN

DevN

Skrevet
Skrevet

Nå er jeg litt forvirra, men du trenger vel kun "margin: 0 auto" for å midtstille siden? Noe slikt hadde du vel i wrappen om jeg ikke husker helt feil.

"text-align" er jo bare for å midtstille tekst, men den har vel ingen effekt når den står under "body" uansett, eller?

 

Det andre problemet så jeg litt over, men ble litt for innviklet for meg. Og jeg har dessuten andre regler for hvordan jeg setter opp et stilark (alt mellom { og } skal stå i alfabetisk rekkefølge) - så det er litt vanskelig å finne fram i stilarket ditt synes jeg. ;)

Lenke til kommentar
Zoxc

Zoxc

Skrevet
Skrevet

Du kan gjere dette med da blir høgda til #warp 0.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>YAHONS Example</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1"/>
<link href="style000.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div id="wrap" style="border:1px solid #FF0000 ">
<div id="wrapleft" style="padding:0; margin:0; float:left;"> // Ny
<div id="top"></div>
<div id="left_column">
<h3>Top 20</h3>
// Top 20

</div>
<div id="mid_column">
<h4>Zaynt - "Image Title"  <em class="normal">(231 views)</em><em class="normal_right">Show profile - PM</em></h4>
<p>
Masse rart
<p>
Masse rart

</div>
</div> // Ny
<div style="padding:0; margin:0; float:right; "> // Ny
<div id="right_column">

<h2>Login</h2>
<form action="login.php">
<label>Username</label>
<input type="text" name="username" size="10"/><br/>
<label>Password</label>
<input type="password" name="password" size="10"/><br/>
<input type="submit" name="login" value="Login"/>

</form>

</div>

<hr class="hidden"></hr>
</div>
</div> // Ny

</body>
</html>

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å
Gå til emneliste
×
×
  • Opprett ny...