fixed naar 'float' - Softwareontwikkeling

woensdag 29 april 2009 09:27

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Hallo,

ik ben nu een site aan het maken met CSS.
Ik heb 4 delen die de site vormen; een achtergrond (alleen kleur), een achtergrond2 voor de inhoud (menu, tekst, header), een header als plaatje op de achtergrond2, onder de header een menu aan de linkerkant (op achtergrond2) en daarnaast een tekst gedeelte (idem op achtergrond 2).

Nu is het zo dat achtergrond2 precies 3px overal onderuit steekt. Daardoor krijg je een soort rand effect. Nu moet ik al de afmetingen (verticaal dus) aanpassen aan de tekst en omdat die drie elementen elkaar niet aanvullen qua lengte (de tekst wordt bijv. groter dan het menu)moet ik ze allemaal fixed erin zetten. Is er nog een mogelijkheid dat dit niet hoeft? Ik wil graag wel mijn idee houden dat het een achtergrond is, dus niet dat het net als een tabel allemaal verbonden is.

alvast bedankt

woensdag 29 april 2009 09:29

Acties:

0 Henk 'm!

BtM909

Watch out Guys...

Heb je direction: rtl; al geprobeerd toe te voegen?

oftewel: geef eens wat relevante code tussen [code=html][/] en [code=css][/] blokken en eventueel een visueel overzicht wat je wilt bereiken. Dat maakt het veel makkelijker om met je mee te denken

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

woensdag 29 april 2009 09:42

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Met de beperkte informatie beschikbaar denk ik aan een gevalletje faux columns, maar zonder code wordt het inderdaad wel een beetje koffiedik kijken

woensdag 29 april 2009 09:54

Acties:

0 Henk 'm!

macciez

Je beschrijft 5 delen die de site vormen ipv 4.
Verder klinkt mij dit ook als een gevalletje faus columns aan (zie post hierboven), lees dat eens door en als dat het niet oplost probeer het eens met wat code te posten

Do what you love, do it often

woensdag 29 april 2009 10:13

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

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

<HEAD>
<title>Site</title>
<link rel="stylesheet" type="text/css" href="mystyle2.css">
</HEAD>

<BODY>
<div id="main_container">

<div id="box1"><img class="afb" src="" alt=""></div>
<div id="achtergrond">
<div id="box2"><ul class="menutekst">

<p><li>Menu1</li></p>
<p><li>Menu1</li></p>
<p><li>Menu1</li></p>
<p><li>Menu1</li></p>
<p><li>Menu1</li></p>
<p><li>Menu1</li></p>
<p><li>Menu1</li></p>
<p><li>Menu1</li></p>
<p><li>Menu1</li></p>
<p><li>Menu1</li></p>
<p><li>Menu1</li></p>
<p><li>Menu1</li></p>
<p><li>Menu1</li></p>
<p><li>Menu1</li></p>
<p><li>Menu1</li></p>
<p><li>Menu1</li></p>
</div>
<div id="box3">
<h3>De site</h3>
<div class="tekst">
TekstTekstTekstTekstTekstTekstTekstTekst TekstTekstTekstTekstTekstT ekstTekstTekstTekstTekstTekstTekst<br>
TekstTekstTekstTekstTekstTekstTekstTekst TekstTekstTekstTekstTekstTekstTekstTekstTekstTekstTekstTekst<br>
TekstTekstTekstTekstTekstTekstTekstTekst TekstTekstTekstTekstTekstTekstTe kstTekstTekstTekstTekstTekst<br>
TekstTekstTekstTekstTekstTekstTekstTekst TekstTekstTekstTekstTekstTekstTekstTekstTekstTekstTekstTekst<br>
TekstTekstTekstTekstTekstTekstTekstTekst TekstTekstTekstTekstTekstTekstTekstTekstTekstTekstTekstTekst<br>

v
TekstTekstTekstTekstTekstTekstTekstTekst TekstTekstTekstTekstTekstTekst TekstTekstTekstTekstTekstTekst<br>
<br>
TekstTekstTekstTekstTekstTekstTekstTekst TekstTekstTekstTekstTekstTekstTekstTekstTekstTekstTekstTekst<br>
TekstTekstTekstTekstTekstTekstTekstTekst TekstTekstTekstTekstTekstTekstTekstTekstTekstTekstTekstTekst<br>

TekstTekstTekstTekstTekstTekstTekstTekst TekstTekstTekstTekstTekstTekstTekstTekstTekstTekstTekstTekst<br>
</div>
</div>
</div>
</div>
</BODY>
</HTML>

--- css ----
body{
margin: 0;
text-align: center;
font-family:calibri;
background-color:FFD47F
}

div#main_container{
margin: 0 auto 0 auto;
width: 846px;
text-align: center;
background-color: 645228;
}

div#box1{
background-color: 645228;
width: 98,8%;
height: 206;
position: relative;
}

img.afb{
position: relative;
margin-top:3px;
}

div#achtergrond{
width:846px;
height:806px;
background-color: 645228;
}

div#box2{
background-color: D33725;
float: left;
width: 250;
height: 800px;
margin-left:3px;
text-align:left;
list-style-type:none;
}

div#box3{
background-color: ED9422;
float: left;
width: 590;
height: 800px;
margin-right:3px;
text-align:left;
}

div#achtergrond2{
width:846px;
height: 2856px;
background-color: 645228;
}

div#box22{
background-color: D33725;
float: left;
width: 250;
height: 2850px;
margin-left:3px;
text-align:left;
list-style-type:none;
}

div#box32{
background-color: ED9422;
float: left;
width: 590;
height: 2850px;
margin-right:3px;
text-align:left;
}

div#achtergrond3{
width:846px;
height:1306px;
background-color: 645228;
}

div#box23{
background-color: D33725;
float: left;
width: 250;
height: 1300px;
margin-left:3px;
text-align:left;
list-style-type:none;
}

div#box33{
background-color: ED9422;
float: left;
width: 590;
height: 1300px;
margin-right:3px;
text-align:left;
}

div#achtergrond4{
width:850px;
height:2006px;
background-color: 645228;
}

div#box24{
background-color: D33725;
float: left;
width: 246;
height: 2000px;
margin-left:3px;
text-align:left;
list-style-type:none;
}

div#box34{
background-color: ED9422;
float: left;
width: 598;
height: 2000px;
margin-right:3px;
text-align:left;
}

ul {
list-style-type:none;
text-decoration: none;
PADDING-LEFT: 2px;
margin-left:0px;
margin-top:5px;

}

li.bol {
list-style-type: disc;
}

li.bol {
margin: 14px;
}

a {
text-decoration:none;
color:EEC327;
font-size:medium;
}

a:hover {
color: #645228;
text-decoration: none; }

a:visited {
color: #EEC327;
text-decoration: none; }

a:visited:hover {
color: #645228;
text-decoration: none; }

a.black {
color: D33725;
}

.tekst {
text-align:left;
padding-left:4px;
padding-right:4px;
font-family: calibri;
font-size:medium;
}

h2 {
font-family: calibri;
}

h3 {
text-align: center;
font-family: calibri;
}

img {
text-align:right;
cellpadding-right:4px;
}

div#zwart {
color:000000;
}

div#kop1 {
text-align: flow;
font-family: calibri;
color: black;
}

div#quote {
text-align:right;
font-style:italic;
font-size:20px;
}

div#groep {
text-align:center;
}

p.groep {
text-align:center;
}

============================
Die boxes zijn er omdat ik alles fixed heb; omdat er meerdere paginas zijn heb ik dus ook meerdere 'fixes' nodig.

woensdag 29 april 2009 10:54

Acties:

0 Henk 'm!

rhodium

Je maakt erg veel fouten in je html waaruit ik het idee krijg, dat je gewoon weg niet weet waar je mee bezig bent. Als ik jou was zou ik eens bij het begin beginnen en wat lesjes over html/css volgen. Dan kan je dit probleem zelf oplossen doordat je snapt waar je mee bezig bent.

woensdag 29 april 2009 11:19

Acties: