CSS DIV

Moderators: jkien, Xilvo

Reageer

Bericht 10-03-'13, 21:47

Energyfellow

Gebruikersavatar
Berichten: 122

CSS DIV

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.PNG
CSS.PNG (20.98 KiB) 557 keer bekeken
Mvg,

Roger
Omhoog

Bericht 10-03-'13, 22:20

Xenion

Gebruikersavatar
Berichten: 2.609

Re: CSS DIV

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>
Omhoog

Bericht 10-03-'13, 23:01

Energyfellow

Gebruikersavatar
Berichten: 122

Re: CSS DIV

Xenion,

Hartelijk dank.

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

Mvg,

Roger

Afbeelding
Omhoog

Bericht 10-03-'13, 23:15

Xenion

Gebruikersavatar
Berichten: 2.609

Re: CSS DIV

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

Bericht 10-03-'13, 23:20

Energyfellow

Gebruikersavatar
Berichten: 122

Re: CSS DIV

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;

}
Omhoog

Bericht 11-03-'13, 08:34

Xenion

Gebruikersavatar
Berichten: 2.609

Re: CSS DIV

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.)
Omhoog

Bericht 11-03-'13, 23:26

Energyfellow

Gebruikersavatar
Berichten: 122

Re: CSS DIV

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/#&#33;9BYAAKrT!Daerg ... ISllNwWXgg

Dank bij voorbaat,

Roger
Omhoog

Bericht 12-03-'13, 00:16

Xenion

Gebruikersavatar
Berichten: 2.609

Re: CSS DIV

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;

}
Omhoog

Bericht 12-03-'13, 10:34

Energyfellow

Gebruikersavatar
Berichten: 122

Re: CSS DIV

Hartelijk bedankt.
Omhoog
Reageer

Terug naar “Informatica en programmeren”