Springen naar inhoud

CSS DIV


  • Log in om te kunnen reageren

#1

Energyfellow

    Energyfellow


  • >100 berichten
  • 122 berichten
  • Ervaren gebruiker

Geplaatst op 10 maart 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
#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.
#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

Mvg,
Roger

Dit forum kan gratis blijven vanwege banners als deze. Door te registeren zal de onderstaande banner overigens verdwijnen.

#2

Xenion

    Xenion


  • >1k berichten
  • 2606 berichten
  • Moderator

Geplaatst op 10 maart 2013 - 22:20

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

Deze code doet volgens mij wel wat je wil:
<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>

#3

Energyfellow

    Energyfellow


  • >100 berichten
  • 122 berichten
  • Ervaren gebruiker

Geplaatst op 10 maart 2013 - 23:01

Xenion,

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

Mvg,
Roger
Geplaatste afbeelding

Veranderd door Energyfellow, 10 maart 2013 - 23:03


#4

Xenion

    Xenion


  • >1k berichten
  • 2606 berichten
  • Moderator

Geplaatst op 10 maart 2013 - 23:15

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

#5

Energyfellow

    Energyfellow


  • >100 berichten
  • 122 berichten
  • Ervaren gebruiker

Geplaatst op 10 maart 2013 - 23:20

HTML:

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

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;
}

#6

Xenion

    Xenion


  • >1k berichten
  • 2606 berichten
  • Moderator

Geplaatst op 11 maart 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.)

#7

Energyfellow

    Energyfellow


  • >100 berichten
  • 122 berichten
  • Ervaren gebruiker

Geplaatst op 11 maart 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!DaergjdFOM_hO5iR68TXaFpoU0Ju3hdMkISllNwWXgg

Dank bij voorbaat,
Roger

Veranderd door Energyfellow, 11 maart 2013 - 23:29


#8

Xenion

    Xenion


  • >1k berichten
  • 2606 berichten
  • Moderator

Geplaatst op 12 maart 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.

#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;
}

#9

Energyfellow

    Energyfellow


  • >100 berichten
  • 122 berichten
  • Ervaren gebruiker

Geplaatst op 12 maart 2013 - 10:34

Hartelijk bedankt.





0 gebruiker(s) lezen dit onderwerp

0 leden, 0 bezoekers, 0 anonieme gebruikers

Ook adverteren op onze website? Lees hier meer!

Gesponsorde vacatures

Vacatures