Scripts - Tutorials - Forum - Downloads - Showcase - Contact

Artikels

VPN vergelijken

Algemeen

Beginpagina

FAQ

Grafische worm (243)

Links

Nieuwsartikels

Nieuwsarchief

Boeken programmeren

Overzicht

Samenwerken

Webhosting

Zoek op Sitemasters

Leden

Registreren

Ledenlijst

Ons team

Links

webhostingtop10.be

Sociale media

Follow @sitemasters

Sitemasters

Adverteren op Sitemasters?

Contacteer ons

RSS

Link naar ons

Donaties

Poll

Je moet ingelogd zijn om te stemmen.

Statistieken

Linkpartners

Forum

Categorieën > HTML & CSS

Float Probleem (Opgelost)

tomie94 - 19/11/2007 19:14 (laatste wijziging 20/11/2007 17:00)
PHP interesse		Hallo allemaal.... Ik probeer een website te maken waarbij aan 2 kanten een sidebar zit.... daarvoor heb ik nu de volgende code: css code - Bekijk de code zonder highlighting - Klap code in nieuwe code lees onderaan! nieuwe code lees onderaan! maar nu staat de rechter sidebar (div#sidebarr) onder de content terwijl hij ernaast hoort te staan.... Screenshot: http://img514.i...oatsm5.png Tomie94

18 antwoorden

Gesponsorde links

Wim - 19/11/2007 19:16
Crew algemeen		als je goed kijkt zie je dat de vlakken te breed zijn. Probeer ze eens wat kleiner te maken?

tomie94 - 19/11/2007 19:17 (laatste wijziging 19/11/2007 19:38)
PHP interesse		60%+18%+18% = 96% nog geen honderd... zou toch moeten passen? maar ik maak het wat kleiner Edit Met 60%+10%+10% werkt het nogsteeds niet

Stijn - 19/11/2007 19:50

PHP expert

60%+20%+20% = 100%

Dit leer je als je 8 jaar oud bent.

Je moet een clear:both; zetten in een div

Dit probleem had ik ook.

html4strict code - Bekijk de code zonder highlighting - Klap code in

<div id="sidebar">.....</div>
<div id="content">....</div>
<div id="sidebarr">...</div>

<!-- GEEN INHOUD PLAATSEN :) -->
<div style="clear:both;"></div>

<div id="sidebar">.....</div>
<div id="content">....</div>
<div id="sidebarr">...</div>
 
<!-- GEEN INHOUD PLAATSEN :) -->
<div style="clear:both;"></div>

tomie94 - 20/11/2007 15:01
PHP interesse		sorry, maar het werkt nogsteeds niet het staat nogsteeds hetzelfde als eerst

DrB - 20/11/2007 15:10 (laatste wijziging 20/11/2007 15:10)
HTML interesse		Je hebt dus drie elementen? Zet bij alledrie gewoon float:left; En clear:both wil inderdaad ook nog wel eens helpen

tomie94 - 20/11/2007 15:13 (laatste wijziging 20/11/2007 17:05)
PHP interesse		waarom float left... ik wil dat de een aan de linker kant kleeft een aan de rechterkant en een in het midden Ik probeer het wel even Edit: Nee dan staan ze allemaal op elkaar links! Nogmaals Edit: Nieuwe code en nieuwe screenshot! css Plaatscode: 4066 html html code - Bekijk de code zonder highlighting - Klap code in <div id="sidebar">.....</div><div id="content">....</div><div id="sidebarr">...</div> <!-- GEEN INHOUD PLAATSEN :) --><div style="clear:both;"></div> <div id="sidebar">.....</div><div id="content">....</div><div id="sidebarr">...</div> <!-- GEEN INHOUD PLAATSEN :) --><div style="clear:both;"></div> Screen: http://img413.i...oatox7.png

timo - 20/11/2007 17:02
PHP ver gevorderde		bedankt dat je de code ook even op plaatscode.be zet, dat heeft ons enorm geholpen de 1: float left, de ander float right, de ander geen float meegeven (de 1 is links, ander rechts en de ander content;-)

tomie94 - 20/11/2007 17:04
PHP interesse		als ik de rechter veranders staat hij links onder de linker sidebar

SilVeX - 20/11/2007 18:05
HTML beginner		Als je ook het deel van je html wil publiceren kan dat waarschijnlijk wel tot de oplossing zorgen

tomie94 - 20/11/2007 18:34 (laatste wijziging 22/11/2007 19:40)

PHP interesse

hiero:

html4strict code - Bekijk de code zonder highlighting - Klap code in

<!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" lang="en" xml:lang="en">
        <head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>
De nieuwe site
</title>
<link href="class.css" rel="stylesheet" type="text/css" />

</head>
<body>
<div id="header">
</div>
<div id="menu">
<p class="menup">
menu
</p>

</div>

<div id="sidebar">.....</div><div id="content">....</div><div id="sidebarr">...</div> 
<div style="clear:both;"></div>

<p id="footer">

</p>

</body>
</html>

<!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" lang="en" xml:lang="en">
        <head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>
De nieuwe site
</title>
<link href="class.css" rel="stylesheet" type="text/css" />
 
</head>
<body>
<div id="header">
</div>
<div id="menu">
<p class="menup">
menu
</p>
 
</div>
 
<div id="sidebar">.....</div><div id="content">....</div><div id="sidebarr">...</div> 
<div style="clear:both;"></div>
 
<p id="footer">
 
</p>
 
</body>
</html>

[edit]
Niemand?
[/edit]

SilVeX - 22/11/2007 16:16 (laatste wijziging 22/11/2007 16:17)
HTML beginner		Zet bij je div content: float:left; en bij je sidebarr ook: float:left; Dan doet hij het gewoon En dan kan je nog margin-left: 10px; gebruiken om de divjes van elkaar af te drukken

tomie94 - 22/11/2007 16:25 (laatste wijziging 22/11/2007 18:52)
PHP interesse		ja dat werkt maar nu met het volgende probleem: nu als ik de content eronder nog een keer plaats dus zonder de sidebar's staat hij 19 px; van de rand hoe kan ik zorgen dat hij in het midden staat??

Thomas - 22/11/2007 19:12
Moderator		Maak een container-div die gecentreerd is?

tomie94 - 22/11/2007 19:37
PHP interesse		werkt helaas niet... css code - Bekijk de code zonder highlighting - Klap code in div#container { margin: 0 auto; width: 100% } div#container { margin: 0 auto; width: 100% }

Thomas - 22/11/2007 20:47 (laatste wijziging 22/11/2007 20:48)
Moderator		euh, ja... hoe kan iets met width 100% gecentreerd zijn? ... Maak je margin 0, auto en verwijder width - dat zou al beter moeten werken?

tomie94 - 23/11/2007 15:05 (laatste wijziging 26/11/2007 16:00)
PHP interesse		dan staat het nogsteeds zoveel px van de rand niemand?

Simax - 26/11/2007 16:07 (laatste wijziging 26/11/2007 16:08)

Onbekend

Probeer dit eens?

css code - Bekijk de code zonder highlighting - Klap code in

                div.container
{
  height: invullen;
  left: 50%;
  position: absolute;
  margin: 0 -350px
  width: 700px;
}

div.left
{
  float: left;
  height: invullen;
  position: relative;
  width: invullen;
}

div.center
{
  float: left;
  height: invullen;
  position: relative;
  width: invullen;
}

div.right
{
  float: left;
  height: invullen;
  position: relative;
  width: invullen;
}

            
div.container
{
  height: invullen;
  left: 50%;
  position: absolute;
  margin: 0 -350px
  width: 700px;
}
 
div.left
{
  float: left;
  height: invullen;
  position: relative;
  width: invullen;
}
 
div.center
{
  float: left;
  height: invullen;
  position: relative;
  width: invullen;
}
 
div.right
{
  float: left;
  height: invullen;
  position: relative;
  width: invullen;
}
 

Zou moeten werken..

tomie94 - 26/11/2007 16:29

PHP interesse

ik heb hem iets aangepast en het is nu dit:

css code - Bekijk de code zonder highlighting - Klap code in

                .info
{
background: url(afbeeldingen/info.gif);
width: 600px;
min-height: 200px;
height: 0 auto;
}
.titel_infor
{
background: url(afbeeldingen/titel_info.gif);
width: 200px;
height: 45px;
float: right;
}
.titel_infol
{
background: url(afbeeldingen/titel_info.gif);
width: 200px;
height: 45px;
float: left;

}
.content_infol
{

width: 200px;
min-height: 100px;
height: 0 auto;
float: left;
}
.content_infor
{

width: 200px;
min-height: 100px;
height: 0 auto;
float: right;
}
.midden
{

width: 200px;
min-height: 100px;
height: 0 auto;
float: left;
}

            
.info
{
background: url(afbeeldingen/info.gif);
width: 600px;
min-height: 200px;
height: 0 auto;
}
.titel_infor
{
background: url(afbeeldingen/titel_info.gif);
width: 200px;
height: 45px;
float: right;
}
.titel_infol
{
background: url(afbeeldingen/titel_info.gif);
width: 200px;
height: 45px;
float: left;
 
}
.content_infol
{
 
width: 200px;
min-height: 100px;
height: 0 auto;
float: left;
}
.content_infor
{
 
width: 200px;
min-height: 100px;
height: 0 auto;
float: right;
}
.midden
{
 
width: 200px;
min-height: 100px;
height: 0 auto;
float: left;
}
 

ik werk liever niet met position omdat er ook nog een paar onder komen te staan

Gesponsorde links

Dit onderwerp is gesloten.

Actiefste leden van de maand

Actieve forumberichten