CSS DIV

Energyfellow · zo 10 mar 2013, 21:47

Beste,

Ik heb hier een probleempje met CSS.

Ik wil het volgende doen twee kaders met tekst weergeven die samen 800px groot zijn.

Als ik dat wil doen, dan doe ik het volgende:

1) Ik maak in een DIV een wrap klassen aan met als bijhorende CSS

Code: Selecteer alles

#wrap {

margin-left: auto;

margin-right: auto;

padding: 0px;}

2) In bovenstaande DIV maak ik opnieuw twee DIV's aan met de klassen: 'tabel1' en 'tabel2' met volgende CSS.

Code: Selecteer alles


#tabel1 {

width: 400px;

float:left;

margin: 0px;

padding: 0px;

display: inline;}

#tabel2 {

width: 400px;

float: 400px;

margin: 0px;

padding: 0px;

display: inline;}

Waarom krijg ik ze niet naast elkaar? Moet ik nog het element 'p' gebruiken? Als ze dan naast elkaar staan, hoe zorg ik ervoor dat de tekst mooi naar onder gaat zonder scroll en zonder hide.

: CSS 633 keer bekeken

Mvg,

Roger

Xenion · zo 10 mar 2013, 22:20

Ik denk niet dat 'float:400px' een geldige waarde is.

Deze code doet volgens mij wel wat je wil:

Code: Selecteer alles


<div style="width: 800px; overflow: hidden;">

  <div style="width: 400px; float: left;">

    <p> "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </p>

  </div>

  <div style="width: 400px;margin-left:400px;">

    <p> "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </p>

  </div>

</div>

Energyfellow · zo 10 mar 2013, 23:01

Xenion,

Hartelijk dank.

Weet je soms toevallig hoe ik die Â's zou kunnen wegkrijgen?

Mvg,

Roger

Afbeelding

Xenion · zo 10 mar 2013, 23:15

Zonder code niet nee. Je zal daar wel ergens om vragen zeker?

Energyfellow · zo 10 mar 2013, 23:20

HTML:

Code: Selecteer alles




<!DOCTYPE HTML>

<html>

<head>

<title>

Oefening

</title>

<link rel="stylesheet" href="styles.css" type="text/css" >

</head>



<body>



<div id="wrapper">



   <div id="linkerkant">

     <p> "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </p>

   </div>



   <div id="rechterkant">

     <p> "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </p>

   </div>



</div>



</body>

</html>

CSS

Code: Selecteer alles




body {

margin: 0px;

padding: 0px;

}



#wrapper {

width: 800px;

overflow: hidden;

margin-left: auto;

margin-right: auto;

border: #F90 solid 5px;

}



#linkerkant {

width: 400px;

float: left;

}



#rechterkant {

width: 400px;

margin-left: 400px;

}

Xenion · ma 11 mar 2013, 08:34

Aan je code is niks te zien en als ik het zelf uittest dan ziet het er gewoon goed uit :/ (Zowel in Chrome, Firefox en IE.)

Energyfellow · ma 11 mar 2013, 23:26

Xenion,

Bedankt voor alles.

Ik heb wel nog een klein vraagje over een ander project.

Weet jij soms waarom mijn twee afbeeldingen niet meer in 'Content' passen naast 'Article'?

Code: https://mega.co.nz/#!9BYAAKrT!Daerg ... ISllNwWXgg

Dank bij voorbaat,

Roger

Xenion · di 12 mar 2013, 00:16

Goh ik ben daar zelf ook niet echt goed in. Ik pruts maar wat en dit blijkt te werken, maar ik zou je niet in detail kunnen vertellen waarom.

Code: Selecteer alles


#wrapper {

width: 770px;

background-image: url('../images/wrapper.png');

overflow: hidden;

}

article {

float:left;

width: 500px;

color: white;

}

article img{

float: right;

}

aside {

float: right;

width: 201px;

padding: 0px;

}

Energyfellow · di 12 mar 2013, 10:34

Hartelijk bedankt.

CSS DIV

CSS DIV

Re: CSS DIV

Re: CSS DIV

Re: CSS DIV

Re: CSS DIV

Re: CSS DIV

Re: CSS DIV

Re: CSS DIV

Re: CSS DIV

Contact

Educatie

Community