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.
Weer een voorbeeldje van je probleem bij de wortel aanpakken:quote:Op woensdag 8 juni 2011 09:22 schreef RenRen- het volgende:
Ik ben dus bezig met een site, die met de transparantie, en die boxen hebben ook een box-shadow.
Eén van de divs waar ik mee bezig was, schaalde niet mee met de content, niet met 100% of met auto, dus heb ik een overflow:auto eraan toegevoegd, en een height van 1%. Werkt perfect, op een klein detail na, de box-shadow doet een beetje raar.
Met overflow:auto en height:1%:
[ afbeelding ]
Zonder een van beiden:
[ afbeelding ]
Code van de div:
[ code verwijderd ]
Iemand enig idee hoe dit komt?
- een div schaalt niet mee
- je past een hack toe
- je hack introduceert een nieuw probleem
Waarschijnlijk kun je die div mee laten schalen door 'm overflow:visible of hidden te geven, of anders door een element met clear:both onderin de div te plaatsen. Heb je die hele hack niet nodig.
Hidden knipt het af waardoor de helft van de text dus verdwijnt, en de float kan helaas niet weg, anders komen ze onder elkaar te staan.quote:Op woensdag 8 juni 2011 09:24 schreef n8n het volgende:
probeer :hidden;, of haal de float weg van de content in de transparente box
Het moet echt perse naast elkaar.
Even zien welke ik dan clear:both moet geven... Ik denk de footer, thanksquote:
[..]
Weer een voorbeeldje van je probleem bij de wortel aanpakken:
- een div schaalt niet mee
- je past een hack toe
- je hack introduceert een nieuw probleem
Waarschijnlijk kun je die div mee laten schalen door 'm overflow:visible of hidden te geven, of anders door een element met clear:both onderin de div te plaatsen. Heb je die hele hack niet nodig.
Edit, footer heeft al clear:both... Hm. Ik ben confused
Overflow:visible werkt ook niet, schaalt-ie ook niet van mee.
is de height auto? inline-block zet het ook naast elkaar maar dan heb je een if[ie6] nodigquote:
[..]
Hidden knipt het af waardoor de helft van de text dus verdwijnt, en de float kan helaas niet weg, anders komen ze onder elkaar te staan.
“Specialization is for insects”.—Robert Heinlein
height auto werkte niet, 1% werkte wel, maar dus met die lelijkheidquote:Op woensdag 8 juni 2011 09:29 schreef n8n het volgende:
[..]
is de height auto? inline-block zet het ook naast elkaar maar dan heb je een if[ie6] nodig
Ik denk helaas dat de meeste mensen die die site gaan gebruiken IE gebruiken, vast ook oudere versies. Even zoeken wat die fix is dan
Bedankt voor het meedenken ook!
lijkt er op dat je div niet in het midden staat, deze dan ook maar een float geven geen mogelijkheid?
“Specialization is for insects”.—Robert Heinlein
| 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:
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:
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:
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?
p {display:inline; border-top: ~; border-bottom: ~;}
“Specialization is for insects”.—Robert Heinlein
Dan is de vraag: "waarom gaat die boder rondom de div staan?"quote:
[..]
Dan krijg ik dus een border rondom de div...en niet de p-text.
en niet: "watvoor hack ga ik gebruiken zodat ik bovenstaande vraag niet hoef te beantwoorden?"
Het n8n, het is uiteindelijk gelukt met m'n css. Uiteindelijk had ik dat float gedoe niet eens hoeven te doen omdat Wordpress posts zelf rangschikt: www.mirelmasic.nl De nieuwste staat dus helemaal links
Ik heb wel een probleempje: In Firefox en IE staat alles naar beneden zoals het moet, maar in Opera niet. Opera is mijn standaard browser en het zou handig zijn als ik het daar ook goed kan krijgen
edit: ineens is na een update alles naar de klote. Heb nog een backupje: http://1577359.huweb.nl
[ Bericht 6% gewijzigd door Mirel op 09-06-2011 17:01:45 ]
Ik heb wel een probleempje: In Firefox en IE staat alles naar beneden zoals het moet, maar in Opera niet. Opera is mijn standaard browser en het zou handig zijn als ik het daar ook goed kan krijgen
edit: ineens is na een update alles naar de klote. Heb nog een backupje: http://1577359.huweb.nl
[ Bericht 6% gewijzigd door Mirel op 09-06-2011 17:01:45 ]
When all else fails, you always have delusion.
OK wtf, mijn hele layout is weg. Ik heb wel toevallig Wordpress net nog geupdate. Het vreemde is dat dit bij een klasgenoot vandaag ook gebeurd is. Hmm.
Edit: ineens weer terug.
Ik heb wel toevallig Wordpress net nog geupdate. Het vreemde is dat dit bij een klasgenoot vandaag ook gebeurd is. Hmm.Edit: ineens weer terug.
When all else fails, you always have delusion.
Wat is de netste of correcte methode?
1: style achter scr, met ;
2: style achter scr, zonder ;
3: style voor scr, met ;
4: style voor scr, zonder ;
1: style achter scr, met ;
| 1 | <a href="www.bla.bla"><img src="plaatje.jpg" width="468" height="60" alt="" title="" style="border: 1px solid #000000;" /></a> |
2: style achter scr, zonder ;
| 1 | <a href="www.bla.bla"><img src="plaatje.jpg" width="468" height="60" alt="" title="" style="border: 1px solid #000000" /></a> |
3: style voor scr, met ;
| 1 | <a href="www.bla.bla"><img style="border: 1px solid #000000;" src="plaatje.jpg" width="468" height="60" alt="" title="" /></a> |
4: style voor scr, zonder ;
| 1 | <a href="www.bla.bla"><img style="border: 1px solid #000000" src="plaatje.jpg" width="468" height="60" alt="" title="" /></a> |
Een ballonvaarder die door de mand valt is nooit grappig...
Het is allemaal om te huilen.
CSS hoort in een aparte stylesheet te staan. De enige reden waar ik inline CSS voor gebruik is voor bijv. dynamische achtergronden uit een CMS o.i.d. en eventueel via Javascript dingen aanpassen (hoewel ik dat indien het mogelijk is liever doe met het toevoegen van een class).
CSS hoort in een aparte stylesheet te staan. De enige reden waar ik inline CSS voor gebruik is voor bijv. dynamische achtergronden uit een CMS o.i.d. en eventueel via Javascript dingen aanpassen (hoewel ik dat indien het mogelijk is liever doe met het toevoegen van een class).
Nee.
Verklaar u nader.
Edit: je hebt je bericht al ge-edit met verklaring.
Edit: je hebt je bericht al ge-edit met verklaring.
Een ballonvaarder die door de mand valt is nooit grappig...
Vraagje, ik snap het niet meer.
ben sinds een kleine maand bezig met wat html5, css. Alleen ik snap niet waarom het volgende gebeurd: (getest in safari en chrome)
Het 'vlaggetje' moet gecentreerd op die grijze balk bovenaan.
Die 2 knoppen moeten gewoon netjes worden uitgelijnd op die grijze balk:
HTML:
CSS:
Wie snapt hem
?
(Sorry voor de rommelige code. en wie ziet van welke Mac App deze layout komt?)
[ Bericht 0% gewijzigd door Tazar_Yoot op 11-06-2011 01:13:40 ]
ben sinds een kleine maand bezig met wat html5, css. Alleen ik snap niet waarom het volgende gebeurd: (getest in safari en chrome)
Het 'vlaggetje' moet gecentreerd op die grijze balk bovenaan.
Die 2 knoppen moeten gewoon netjes worden uitgelijnd op die grijze balk:
HTML:
| 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 35 36 37 38 39 | <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Area 007</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="container"> <div id="navigation"> <img class="banner" src="../../../../../Desktop/flag.png" width="60" height="80" alt="banner"> <nav> <ul> <li><img src="img/bttn/spacer.gif"> <li class="home"><a href="http://google.com"><img src="img/bttn/portfolio.jpg" width="150" height="50" alt="portfolio"></a> <li><img src="img/bttn/spacer.gif"> <li class="portfolio"><a href="http://google.com"><img src="img/bttn/about.jpg" width="150" height="50" alt="about"></a> <li><img src="img/bttn/spacer.gif"> </ul> </nav> </div> <div id="content"> <header> <h1> Header Tekst </h1> </header> <section id="portfolio"> <article> <h2> Article one. </h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pretium ipsum vitae tellus sollicitudin cursus. Proin ac odio nec quam auctor placerat vel et risus. Vestibulum quis sem vel neque venenatis tincidunt malesuada sed leo. Etiam quis eros vel orci euismod fermentum. Donec eu dignissim est. </article> </section> </div> </div> </nav> </body> </html> |
CSS:
| 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 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | @charset "UTF-8"; /* CSS Document */ body{ background-image: url(img/bg.gif); margin:auto; font-family:Arial, Helvetica, sans-serif; margin:0px; padding:0px; } #container{ width:800px; height:500px; background-color:#FFFFFF; margin-left:auto; margin-right:auto; margin-top:60px; -moz-box-shadow: 0 0 100px #888; -webkit-box-shadow: 0 0 100px#888; box-shadow: 0 0 100px #888; } #navigation{ padding-top:150px; float:left; width:150px; background-color:#999999; background-image:url(img/navbg.png); background-repeat:repeat-y; height:350px; -webkit-box-shadow: inset -5px -0px 5px #000000; -moz-box-shadow: inset -5px -0px 5px #000000; box-shadow: inset -5px -0px 5px #000000; } section { padding:30px; } #content{ float:left; width:650px; } header { background-color:#FFFFFF; padding:10px 0px 0px 30px; } nav{ padding:0px; margin:0px; float:left; } a { color:#7f7f7f; text-decoration:none; } a:hover { color:#494949; text-decoration:none; } ul { list-style-type:none; float:left; } li { } .banner{ padding:10px 5px 200px 50x; } |
Wie snapt hem
?(Sorry voor de rommelige code. en wie ziet van welke Mac App deze layout komt
?)[ Bericht 0% gewijzigd door Tazar_Yoot op 11-06-2011 01:13:40 ]
Probeer het vlaggetje in een div te zetten ipv een img src tag. Die houden zich niet altijd aan de regels. Die div margin 0 auto geven.
When all else fails, you always have delusion.
nicequote:
Het n8n, het is uiteindelijk gelukt met m'n css.
jammer dat dit niet kan
| 1 2 3 4 5 | body header:hover { body { color: red; } } |
“Specialization is for insects”.—Robert Heinlein
Met een tool als LESS kun je dat soort CSS wel schrijven. Ik heb het een tijdje op kantoor gebruikt, maar ben er toch van terug gekomen. Ja, het maakt de code die je schrijft wat compacter enzo, maar toch liep ik iedere keer tegen problemen aan met bijv. CSS3-properties en dingen die niet juist werden gemerged/geminified.
Nee.
is dat javascript? ik bedoel dat je effect uitoefent op een bovenliggend element door een binnengesloten element te gebruikenquote:
Met een tool als LESS kun je dat soort CSS wel schrijven. Ik heb het een tijdje op kantoor gebruikt, maar ben er toch van terug gekomen. Ja, het maakt de code die je schrijft wat compacter enzo, maar toch liep ik iedere keer tegen problemen aan met bijv. CSS3-properties en dingen die niet juist werden gemerged/geminified.
“Specialization is for insects”.—Robert Heinlein
Waarom zou ik dat doenquote:
[..]
nice
jammer dat dit niet kan
[ code verwijderd ]
Of was het het 2e onderwerp in je post afzonderlijk van de nice gericht naar mij?
When all else fails, you always have delusion.
