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.
Nou ik dacht als er dan ook 1 voor phpers is (meerdere zelfs ) dan mag er vast ook wel 1 voor CSS want ik zit met een probleem .. Voor het eerst ben ik zelf helemaal 100% css wezen schrijven met topstyle. Ik wil een bestaand iets (dat in flash is gemaakt) een beetje ombouwen naar css maar gaat natuulijk nog niet geheel zoals het zou moeten.
Wat wil ik?
Ik wil een overzicht maken met css, dit kan met tabellen, labels maar ook met divjes etc. Nu heb ik het even geprobeerd met divjes omdat ik die wel 'aardig' begrijp maar blijkbaar niet helemaal.
Een voorbeeld van wat ik wil hebben
en wat heb ik al
nu heb ik dit
met de volgende code
dus het volgende stukje
) dan mag er vast ook wel 1 voor CSS want ik zit met een probleem 
.. Voor het eerst ben ik zelf helemaal 100% css wezen schrijven met topstyle. Ik wil een bestaand iets (dat in flash is gemaakt) een beetje ombouwen naar css maar gaat natuulijk nog niet geheel zoals het zou moeten.Wat wil ik?
Ik wil een overzicht maken met css, dit kan met tabellen, labels maar ook met divjes etc. Nu heb ik het even geprobeerd met divjes omdat ik die wel 'aardig' begrijp maar blijkbaar niet helemaal.
Een voorbeeld van wat ik wil hebben
en wat heb ik al
nu heb ik dit
met de volgende code
heeft iemand misschien tips hoe ik dus bijvoorbeeld een plaatje kan invoegen? want als ik dat doe krijg je het volgende resultaatquote:<style>
BODY {
color: Black;
background-color: #F2F1EF;
font-family: "Microsoft Sans Serif", sans-serif;
font-size: 11px;
}
.itemheader
{
border: 1px solid white;
width: 530px;
height: 15px;
}
.itemdesc
{
float: left;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #EBE9E6;
text-align: left;
border-bottom: 1px solid white;
}
.item
{
float: left;
background-color: #F2F1EF;
text-align: left;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
text-align: left;
}
.itemtop
{
float: left;
background-color: #87CEFA;
text-align: left;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
text-align: left;
}
img {
display: inline;
}
</style>
<body>
<div class="itemheader">
<div class="itemdesc" style="width: 100px;">Test</div> <div class="itemdesc" style="width: 200px;">Object</div> <div class="itemdesc" style="width: 200px;">Function</div>
<div class="itemtop" style="width: 100px;">Test</div> <div class="item" style="width: 200px;">Obj</div> <div class="item" style="width: 200px;">Function</div>
<div class="item" style="width: 100px;">Test1231231</div> <div class="item" style="width: 200px;">Object</div> <div class="item" style="width: 200px;">Function</div>
<div class="item" style="width: 100px;">Test</div> <div class="item" style="width: 200px;">Object1412342134</div> <div class="item" style="width: 200px;">Function</div>
<div class="itemtop" style="width: 100px;">Test</div> <div class="item" style="width: 200px;">Object</div> <div class="item" style="width: 200px;">Function</div>
<div class="item" style="width: 100px;">Test</div> <div class="item" style="width: 200px;">Object</div> <div class="item" style="width: 200px;">Function</div>
<div class="itemtop" style="width: 100px;">Test</div> <div class="item" style="width: 200px;">Object</div> <div class="item" style="width: 200px;">Function</div>
</div>
dus het volgende stukje
aangepast naarquote:<div class="itemtop" style="width: 100px;">Test</div> <div class="item" style="width: 200px;">Obj</div> <div class="item" style="width: 200px;">Function</div>
quote:<div class="itemtop" style="width: 100px;">Test<img src="c:/red.jpg"></div> <div class="item" style="width: 200px;">Obj</div> <div class="item" style="width: 200px;">Function</div>
Just say hi!
eventjes waar je de fout ingaat:
het is geen oplossing om 'naar CSS te gaan' en dan een HTML-pagina gedachteloos om te plempen in allerlei DIV-tags ...
alsof HTML maar een tag heeft en dat de DIV is ...
HTML biedt een rijk scala aan tags die de waarde van de inhoud beschrijven, de onderlinge relatie tot andere elementen:
denk bv aan UL (unordered lists), TABLE voor Tabulaire data, H1 tm H6-tags voor Headers, P voor Paragraphs ... EM en STRONG, DIV voor Divisions en SPAN voor inline dingen ...
Probeer eerst je code net en correct zo op te zeggen dat het een goed overzicht biedt voor de ordening van je data, zonder je al tezeer direkt te bekommeren met layout, die je later kunt toevoegen door een paar tactisch egplaatste class of id-attributen..
vermijd zoveel mogelijk andere attributen, als zeker de inline style-attribuut, dat kan je meestal allemaal met een externe CSS oplossen ..
In dit geval,zoals de data eruitziet op dat screenshot, dat moeit je niet anders willen oplossen dan door een TABLE, dat is gewoonweg tabulaire data, en niks anders.
Wat betreft Plaatjes toevoegen ...
kijk eens naar de mogelijkheid om gewoon een plaatje als achtergrond-afbeelding toe te voegen:
het is geen oplossing om 'naar CSS te gaan' en dan een HTML-pagina gedachteloos om te plempen in allerlei DIV-tags ...
alsof HTML maar een tag heeft en dat de DIV is ...
HTML biedt een rijk scala aan tags die de waarde van de inhoud beschrijven, de onderlinge relatie tot andere elementen:
denk bv aan UL (unordered lists), TABLE voor Tabulaire data, H1 tm H6-tags voor Headers, P voor Paragraphs ... EM en STRONG, DIV voor Divisions en SPAN voor inline dingen ...
Probeer eerst je code net en correct zo op te zeggen dat het een goed overzicht biedt voor de ordening van je data, zonder je al tezeer direkt te bekommeren met layout, die je later kunt toevoegen door een paar tactisch egplaatste class of id-attributen..
vermijd zoveel mogelijk andere attributen, als zeker de inline style-attribuut, dat kan je meestal allemaal met een externe CSS oplossen ..
In dit geval,zoals de data eruitziet op dat screenshot, dat moeit je niet anders willen oplossen dan door een TABLE, dat is gewoonweg tabulaire data, en niks anders.
Wat betreft Plaatjes toevoegen ...
kijk eens naar de mogelijkheid om gewoon een plaatje als achtergrond-afbeelding toe te voegen:
je kunt dan de positionering van de tekst in het element zelf makkelijk aanpassen door padding te gebruiken, wardoor de tekst 'achter' of 'naast' de afbeelding begint.quote:background: url(img/red.jpg) no-repeat top left;
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
ok, dus voor 'tabel' data moet ik eingelijk altijd kiezen voor 'tabellen?' of zijn er meer mogelijkheden waarin ik het voorbeeld kan converteren?
Just say hi!
nu heb ik met behulp van de volgende css dit gemaakt.
en met mouse over
groen om even aan te geven wat het is
en met mouse over
groen om even aan te geven wat het is
Hebben jullie nog ideeen cq tips?quote:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<style>
BODY {
color: Black;
background-color: #F2F1EF;
font-family: verdana;
font-size: 11px;
}
.itemheader
{
border-left: 1px solid white;
border-right: 1px solid white;
border-top: 1px solid white;
border-bottom: 1px solid white;
height: 15px;
}
.itemheaderarrow
{
color:#000000;
font-family:webdings;
font-size:10;
text-decoration:none;
cursor:pointer;
}
.itemdesc
{
float: left;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
text-align: left;
border-bottom: 1px solid white;
background-color: #EBE9E6;
}
.itemcell
{
background-color: #F2F1EF;
}
.itemcellon
{
background-color: Lime;
}
.item
{
float: left;
text-align: left;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
text-align: left;
}
.itemtop
{
float: left;
background-color: #87CEFA;
text-align: left;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
text-align: left;
}
img {
display: inline;
}
</style>
<body>
<br/>
<table class=itemheader width="600" cellpadding="0" cellspacing="0">
<tr>
<td class=itemdesc width="30%">Test <font onclick="xx" class="itemheaderarrow" title="Ascending Order">5</font></td>
<td class=itemdesc width="10%">Cat </td>
<td class=itemdesc width="20%">Woei <font onclick="xx" class="itemheaderarrow" title="Ascending Order">5</font></td>
<td class=itemdesc width="40%">oeps</td>
</tr>
<tr class=itemcell onmouseover="className='itemcellon';" onmouseout="className='itemcell';">
<td class=item>Testjuh</td>
<td class=itemtop>kutje</td>
<td class=item>Woeiden</td>
<td class=item>oepsspeo, alleen suiker</td>
</tr>
<tr class=itemcell onmouseover="className='itemcellon';" onmouseout="className='itemcell';">
<td class=item>Testx</td>
<td class=item>kutie</td>
<td class=item>Woeis</td>
<td class=item>oepsenm, zonder melk</td>
</tr>
<tr class=itemcell onmouseover="className='itemcellon';" onmouseout="className='itemcell';">
<td class=item>Test</td>
<td class=item>kuttig</td>
<td class=item>Woeien</td>
<td class=item>oepsie, espresso enzovoorts.</td>
</tr>
</table>
</body>
</html>
Just say hi!
Nou, ik heb ook een css probleem waar ik ff niet uit kom:
Ik wil met div's een layout maken voor een reactiesysteempje wat ik ff aan het bouwen ben.
Het moet er dus ongeveer net zo uitzien als FOK, dus:
-balkje aan linkerkant met username en ondertitel
-daarvan rechts: datum/tijd, bericht, handtekening (drie aparte div's onder elkaar)
Maar ik krijg het niet voor mekaar. Of de linkerbalk loopt niet mee met de hoogte van de rechter div's of die linkerbalk staat heel ergens anders.
Ik weet dat zoiets eenvoudig met een tabel kan, maar kan het ook met div's? Heb alles al geprobeerd maar het lukt me gewoon niet
Iemand ideeën?
Ik wil met div's een layout maken voor een reactiesysteempje wat ik ff aan het bouwen ben.
Het moet er dus ongeveer net zo uitzien als FOK, dus:
-balkje aan linkerkant met username en ondertitel
-daarvan rechts: datum/tijd, bericht, handtekening (drie aparte div's onder elkaar)
Maar ik krijg het niet voor mekaar. Of de linkerbalk loopt niet mee met de hoogte van de rechter div's of die linkerbalk staat heel ergens anders.
Ik weet dat zoiets eenvoudig met een tabel kan, maar kan het ook met div's? Heb alles al geprobeerd maar het lukt me gewoon niet
Iemand ideeën?
Zet wat 'div's in een onzichtbare div zodat ze iig bij elkaar blijven.
Experimenteer met the posittion property. Hier wat leuke links:
http://www.alistapart.com/articles/practicalcss/
Practical CSS Layout Tips, Tricks, & Techniques: A List Apart
http://www.echoecho.com/csslayers.htm
CSS Layers - CSS tutorial
Experimenteer met the posittion property. Hier wat leuke links:
http://www.alistapart.com/articles/practicalcss/
Practical CSS Layout Tips, Tricks, & Techniques: A List Apart
http://www.echoecho.com/csslayers.htm
CSS Layers - CSS tutorial
Ok thanx ga ik morgen ff doorspitten!quote:Op donderdag 28 oktober 2004 21:28 schreef ReVeL het volgende:
Zet wat 'div's in een onzichtbare div zodat ze iig bij elkaar blijven.
Experimenteer met the posittion property. Hier wat leuke links:
http://www.alistapart.com/articles/practicalcss/
Practical CSS Layout Tips, Tricks, & Techniques: A List Apart
http://www.echoecho.com/csslayers.htm
CSS Layers - CSS tutorial
In plaats van elke td de class item mee te geven, kun je ook gewoon de volgende CSS selector gebruiken:quote:Op donderdag 21 oktober 2004 15:09 schreef Chandler het volgende:
Hebben jullie nog ideeen cq tips?
tr.itemcell td {...}
Scheelt je al weer flink wat code
Het stuk
Valt in te korten totquote:.itemcell
{
background-color: #F2F1EF;
}
.item
{
float: left;
text-align: left;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
text-align: left;
}
[...]
<tr class=itemcell onmouseover="className='itemcellon';" onmouseout="className='itemcell';">
<td class=item>Test</td>
<td class=item>kuttig</td>
<td class=item>Woeien</td>
<td class=item>oepsie, espresso enzovoorts.</td>
</tr>
Je hebt maar één statement nodig voor padding, table cells hoef je niet te floaten omdat ze sowieso wel naast elkaar verschijnen, text-alignment is in table cells standaard al links, en op deze manier hoef je niet elke td een eigen classname mee te gevenquote:.itemcell {background-color: #F2F1EF;}
tr.itemcell td {padding: 5px;}
[...]
<tr class="itemcell" onmouseover="className='itemcellon';" onmouseout="className='itemcell';">
<td>Test</td>
<td>kuttig</td>
<td>Woeien</td>
<td>oepsie, espresso enzovoorts.</td>
</tr>
Hoe plaats ik een image in het midden?
Dmv css dus.
Heb al vanalles geprobeerd maar het wil niet werken.
Dmv css dus.
Heb al vanalles geprobeerd maar het wil niet werken.
Bedoel je een enkel image in het midden als een soort van splash screen?quote:Op vrijdag 29 oktober 2004 22:37 schreef DutchBlood het volgende:
Hoe plaats ik een image in het midden?
Dmv css dus.
Want dan kan je zoiets proberen:
CSS
HTMLquote:#deDiv{
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 360px;
margin-left: -150px;
margin-top: -180px;
}
quote:<div id="deDiv"><img src="plaatje" width="300" height="360" alt="" /></div>
Ich fälle Bäume und hupf und spring, steck Blumen in die Vas
Ich schlupf in Frauenkleider, und lummel mich in Bars
Ich schlupf in Frauenkleider, und lummel mich in Bars
Thnx.quote:Op vrijdag 29 oktober 2004 23:12 schreef Berkery het volgende:
[..]
Bedoel je een enkel image in het midden als een soort van splash screen?
Want dan kan je zoiets proberen:
CSS
[..]
HTML
[..]
Als je grote images gebruikt kun je nog
overflow:hidden;
toevoegen aan #deDiv om eventuele scrollbars weg te werken. Dit alleen als je een pagina hebt met alleen het image erop natuurlijk.
mensen, ik heb het volgende.
Voor het eerst (na de 1e post) ben ik bezig een site om te bouwen van veel HTML naar handig CSS nu wil ik echter een plaatje positioneren in mijn pagina, maar dit wil niet geheel lukken.
voorbeeld @ http://www.bruggema.nl/dasarto.com.new/
en het gaat om een van de laatste regels
Voor het eerst (na de 1e post) ben ik bezig een site om te bouwen van veel HTML naar handig CSS nu wil ik echter een plaatje positioneren in mijn pagina, maar dit wil niet geheel lukken.
voorbeeld @ http://www.bruggema.nl/dasarto.com.new/
en het gaat om een van de laatste regels
deze komt nu onder 'de tabel' te staan maar moet in het witte (midden) van het tabel, hoe kan ik deze daar laten verschijnen? ik maak al gebruik van header, middle, etc qua positioneer mogelijkheden.quote:<div style="position: float: right; top: 200px; left: 220px; height: 100px;"><img id="pic" src="./images/maten/meten1.gif"></div>
Just say hi!
ow en nog iets, hoe krijg ik de text Linkje / Linkje / Linkje helemaal onderaan in het 'header' divje? dus niet midden maar geheel rechts onderaan..
quote:<div id="headerlocation">linkje / linkje / linkje</div>
Just say hi!
chandler, kijk eens in mozilla/firefox naar je pagina...
zolang het er zo uitziet ga ik nieteens proberen te kijken waar het probleem ligt...
klinkt heel hard, maar dit is echt niks.
daarnaast vraag je om te helpen, maar heb je een rightclick disable erin gegooid. heel erg behulpzaam
bedoel het overigens niet allemaal zo bot als ik het neergezet heb, maar dit maakt "willen helpen" echt heel erg onaantrekkelijk, terwijl ik helpen in princiepe hardstikke leuk vind (of ik je ook van dienst kan zijn is dan nog maar de vraag, maar you get the point, right?)
zolang het er zo uitziet ga ik nieteens proberen te kijken waar het probleem ligt...
klinkt heel hard, maar dit is echt niks.
daarnaast vraag je om te helpen, maar heb je een rightclick disable erin gegooid. heel erg behulpzaam
bedoel het overigens niet allemaal zo bot als ik het neergezet heb, maar dit maakt "willen helpen" echt heel erg onaantrekkelijk, terwijl ik helpen in princiepe hardstikke leuk vind (of ik je ook van dienst kan zijn is dan nog maar de vraag, maar you get the point, right?)
Haha, ik heb um zelf nog niet eens in Firefox bekeken en dat irrie anti bron bekijken zit in me js... even aanpasse...
Just say hi!
haal de position: uit je style= dat scheelt een hoop.quote:Op dinsdag 23 november 2004 20:57 schreef Chandler het volgende:
mensen, ik heb het volgende.
Voor het eerst (na de 1e post) ben ik bezig een site om te bouwen van veel HTML naar handig CSS nu wil ik echter een plaatje positioneren in mijn pagina, maar dit wil niet geheel lukken.
voorbeeld @ http://www.bruggema.nl/dasarto.com.new/
en het gaat om een van de laatste regels
[..]
deze komt nu onder 'de tabel' te staan maar moet in het witte (midden) van het tabel, hoe kan ik deze daar laten verschijnen? ik maak al gebruik van header, middle, etc qua positioneer mogelijkheden.
<div class="header" style="position:relative;height:60px;width:700px;">quote:Op dinsdag 23 november 2004 20:59 schreef Chandler het volgende:
ow en nog iets, hoe krijg ik de text Linkje / Linkje / Linkje helemaal onderaan in het 'header' divje? dus niet midden maar geheel rechts onderaan..
[..]
<div style="headerlocation" style="position:absolute;bottom:0px;right:0px;">something</div>
</div>
Bijvoorbeeld:quote:Op dinsdag 23 november 2004 20:59 schreef Chandler het volgende:
ow en nog iets, hoe krijg ik de text Linkje / Linkje / Linkje helemaal onderaan in het 'header' divje? dus niet midden maar geheel rechts onderaan..
Werkt in de meeste browsers met goede CSS-2 ondersteuning IE niet dusquote:div{
height: 100px;
width: 200px;
display: table-cell;
vertical-align: bottom;
text-align: right;
border: 1px solid blue;
}
Ich fälle Bäume und hupf und spring, steck Blumen in die Vas
Ich schlupf in Frauenkleider, und lummel mich in Bars
Ich schlupf in Frauenkleider, und lummel mich in Bars
idd, zelf geen last van gehad maar tja kan irrie zijn (verwijderd)quote:Op dinsdag 23 november 2004 21:06 schreef releaze het volgende:
Chandler, kijk eens in mozilla/firefox naar je pagina...
[/qoute]
[quote]
daarnaast vraag je om te helpen, maar heb je een rightclick disable erin gegooid. heel erg behulpzaam
Ik heb er van geleerd en leer nog steeds; misschien nu een kijkje waard?quote:bedoel het overigens niet allemaal zo bot als ik het neergezet heb, maar dit maakt "willen helpen" echt heel erg onaantrekkelijk, terwijl ik helpen in princiepe hardstikke leuk vind (of ik je ook van dienst kan zijn is dan nog maar de vraag, maar you get the point, right?)
Just say hi!
Omdat het voor op een forum is en het in principe voornamelijk duidelijk moet zijn. Hoe jij je classes en je id's toewijst zal me een zorg zijn, en is niet van belang voor het idee achter de position:absolute. Het herrschrijven is aan jou en jouw specifieke situatiequote:Op dinsdag 23 november 2004 21:17 schreef Chandler het volgende:
vraagje.... waarom doe je het appart in een style="" en niet in je <style> ?
