DIG Digital Corner
Alles wat je altijd al over computers, hardware, software, internet en elektronische gadgets had willen weten, maar niet op Tweakers.net durft te vragen.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | #left{ width:215px; height:533px; -moz-box-shadow: 0px 0px 10px #c7c7c7; -webkit-box-shadow: 0px 0px 10px #c7c7c7; box-shadow: 0px 0px 10px #c7c7c7; background:rgba(255,255,255,0.85); margin-top:12px; margin-bottom:12px; padding-left:10px; padding-right:10px; padding-top:15px; display:inline-block; } #content{ width:692px; height:533px; margin-left:12px; box-shadow: 0px 0px 10px #c7c7c7; -moz-box-shadow: 0px 0px 10px #c7c7c7; -webkit-box-shadow: 0px 0px 10px #c7c7c7; background:rgba(255,255,255,0.85); margin-top:12px; margin-bottom:12px; padding-left:10px; padding-right:10px; padding-top:15px; display:inline-block; height:auto; } |
Dit zou dan toch de nieuwe code moeten zijn? Zo ja, dit werkt niet
Welke div staat dan niet in het midden? Wacht, ik geef jullie een url.quote:Op woensdag 8 juni 2011 09:34 schreef n8n het volgende:
lijkt er op dat je div niet in het midden staat, deze dan ook maar een float geven geen mogelijkheid?
Het gaat om de inhoud van je content div. Die heeft (ook) een float, zo te zien. Díé moet je clearen, of de content-div overflow:hidden meegeven, dat heeft het zelfde effect.
-edit- nog beter: moet die inhoud uberhaupt wel gefloat? Kan het niet zonder? (dus niet je content div, maar de inhoud ván je content div)
-edit- nog beter: moet die inhoud uberhaupt wel gefloat? Kan het niet zonder? (dus niet je content div, maar de inhoud ván je content div)
Ik heb dus 2 blokken in het grote blok, en die moeten gefloat zijn, net als het grote blok, dat moet ook naast elkaar komen te staan. Hoe maakt me niet uit, als het maar naast elkaar blijftquote:Op woensdag 8 juni 2011 09:38 schreef KomtTijd... het volgende:
Het gaat om de inhoud van je content div. Die heeft (ook) een float, zo te zien. Díé moet je clearen, of de content-div overflow:hidden meegeven, dat heeft het zelfde effect.
-edit- nog beter: moet die inhoud uberhaupt wel gefloat? Kan het niet zonder? (dus niet je content div, maar de inhoud ván je content div)
Tabellen zijn geen optie vrees ik.
display: inline-block;
enkel ie6 werkt heeft dan een inline nodig meen ik
snap niet waarom de overflow-truc niet werkt http://webdesignerwall.co(...)floats-with-overflow
enkel ie6 werkt heeft dan een inline nodig meen ik
snap niet waarom de overflow-truc niet werkt http://webdesignerwall.co(...)floats-with-overflow
“Specialization is for insects”.—Robert Heinlein
Mijn manier is overigens om eerst de mark-up uiteen te zetten en dan zo clean mogelijk vorm te geven. Alleen de vlakverdeling met contrasterende kleuren opgevuld met wat faux content. Dan kom ik direct achter moeilijkheden en kan ik makkelijk de grenzen opzoeken door wat lorum ipsum extra erbij te kwakken. Wellicht een tip voor de volgende keer (en iedereen die dit verder leest).
“Specialization is for insects”.—Robert Heinlein
Nou ja, het is een zelfgebouwde template, dus ik was niet echt aan het werk met content, vooral met het bouwen, en daarom ben ik nu aan het finetunen. Normaal doe ik het ook zo, maar nu is het ook haasthaasthaast.quote:
Mijn manier is overigens om eerst de mark-up uiteen te zetten en dan zo clean mogelijk vorm te geven. Alleen de vlakverdeling met contrasterende kleuren opgevuld met wat faux content. Dan kom ik direct achter moeilijkheden en kan ik makkelijk de grenzen opzoeken door wat lorum ipsum extra erbij te kwakken. Wellicht een tip voor de volgende keer (en iedereen die dit verder leest).
dan helpt dit ook niet, gooi ff die inline-block er tegenaan ipv de float, dan heb je een block element naast elkaar. Voor IE moet dan maar een hack komenquote:
[..]
Nou ja, het is een zelfgebouwde template, dus ik was niet echt aan het werk met content, vooral met het bouwen, en daarom ben ik nu aan het finetunen. Normaal doe ik het ook zo, maar nu is het ook haasthaasthaast.
http://blog.mozilla.com/w(...)rowser-inline-block/
“Specialization is for insects”.—Robert Heinlein
Je hebt overal keihard een hoogte van 538 pixels instaan. Die moet je weg halen. Uit allebei je stylesheets.
Mooie website wel trouwens!
Mooie website wel trouwens!
Ohja, dan is het opgelost! Dankjeweeelquote:
Je hebt overal keihard een hoogte van 538 pixels instaan. Die moet je weg halen. Uit allebei je stylesheets.
Mooie website wel trouwens!
Maar. Wtf, er is maar 1 css, en #1 en #2 verwijzen naar hetzelfde bestand. Arghhhh, straks even een topic over openen elders thanks
Ik ben er wel blij mee.
Neequote:
Eerst gecentreerd totdat het beeldvullend is bedoel je? Dat wordt lastig... Omdat de inhoud van de container variabel is.
. Altijd gecentreerd, en de height moet meeschalen met de contentdiv die erin staat, en op elke pagina een andere grootte height heeft.
Ja dat dacht ik dus ook. Zo heb ik het ook ingesteld (met een height met vaste grootte), maar als ik die height eruit gooi dan verdwijnt heel m'n container.
Ik centreer mijn container altijd op deze manier:
Als ik nu de height van de container weg haal, en daar een position: absolute toevoeg, dan schaalt mijn container's height wel mee met de hoeveelheid tekst die er is. Maar dan is de container niet meer gecentreerd en ploft ie naar links.
Ik centreer mijn container altijd op deze manier:
| 1 2 3 4 5 6 7 8 9 10 11 | body, html { margin: 0px; padding: 0px; text-align: center; } .container { margin: 0 auto; width: xxpx; height: xxpx; } |
Als ik nu de height van de container weg haal, en daar een position: absolute toevoeg, dan schaalt mijn container's height wel mee met de hoeveelheid tekst die er is. Maar dan is de container niet meer gecentreerd en ploft ie naar links.
Als je container alleen floats bevat is het logisch dat ie verdwijnt. Absoluut positioneren is nergens voor nodig, je moet gebruik maken van een clearfix, bijvoorbeeld:
Door de class .group (of net wat je er van maakt, ik vind group mooier dan bijv. clearfix) toe te voegen zorg je er voor dat een container de floats die ie bevat bevat.
| 1 2 3 4 5 6 7 8 | .group:after { content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0; } |
Door de class .group (of net wat je er van maakt, ik vind group mooier dan bijv. clearfix) toe te voegen zorg je er voor dat een container de floats die ie bevat bevat.
Nee.
Oke, dat klinkt logisch. Ik gebruik inderdaad alleen floats.
Waar zou ik die clearfix precies moeten toevoegen?
Waar zou ik die clearfix precies moeten toevoegen?
Hoe krijg ik het voor elkaar om paragraph text te voorzien van een border ter grootte van de text in een div met een vaste breedte en hoogte?
Als ik ze nu een border-bottom of border-top meegeef dan krijgt de div aan de boven- en onderkant een mooie border in plaats van de text.
Als ik ze nu een border-bottom of border-top meegeef dan krijgt de div aan de boven- en onderkant een mooie border in plaats van de text.
wutwutwut?quote:
Hoe krijg ik het voor elkaar om paragraph text te voorzien van een border ter grootte van de text in een div met een vaste breedte en hoogte?
Als ik ze nu een border-bottom of border-top meegeef dan krijgt de div aan de boven- en onderkant een mooie border in plaats van de text.
Een paragraph een border ter grootte van de text in een div met vaste breedte en hoogte...
Dus:
- je hebt een paragraph (<p>) met tekst,
- je hebt een div,
- je wilt een border op de paragraph.
- De border komt op de div ipv op de paragraph.
Snap ik het zo goed?
Zo ja kom eens met een voorbeeld. En zo nee eigenlijk ook.
Je snapt hem helemaal, hier een voorbeeld:
Heb al wat gevonden al werkt het niet helemaal, text-decoration: underline overline.
Edit: nu met CSS van de div. P is verder niet gestyled.
[ Bericht 10% gewijzigd door Black-Hole op 08-06-2011 22:49:15 ]
| 1 2 3 4 5 6 | <div id="advert2text"> <p>IK Oude straatjes vol leuke boetiekjes.<br> JIJToe aan 'n dagje uit. Datum prikken?</p> </div> <!-- end text --> |
| 1 2 3 4 5 6 7 | #advert1text{ float: left; width: 315px; height: 94px; margin-bottom: 22px; background: url('../images/advertbg.jpg') no-repeat; } |
Heb al wat gevonden al werkt het niet helemaal, text-decoration: underline overline.
Edit: nu met CSS van de div. P is verder niet gestyled.
[ Bericht 10% gewijzigd door Black-Hole op 08-06-2011 22:49:15 ]
Er mag nog wat padding rondom te tekst nodig, stylen met line-height heeft helaas geen effect. Weet niet of dat effect heeft op een border-top/bottom eigenlijk...quote:
Wat is er mis met underline & overline dan?
| 1 2 3 4 5 | #advert1text p{ padding: 18px 0px 0px 10px; line-height: 30px; text-decoration: underline overline; } |
Helaas, geen effect. Kan het heel simpel oplossen met een plaatje maar daar heb ik geen zin in eigenlijk.quote:
Op
Hij wil het toch op de tekst (iedere regel) en niet om de hele container (p of div) toch? Zo begrijp ik het iig...
Dan krijg ik dus een border rondom de div...en niet de p-text.quote:
Eerder: wat is er mis met simpelweg border-top en border-bottom op je p-element?
