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>
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>
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;
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>
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?
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>
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.
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>
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
[..]
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>
quote:<div id="headerlocation">linkje / linkje / linkje</div>
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..
[..]
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;
}
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?)
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> ?
Sorry, maar daar ben ik het absoluut niet mee eens;quote:Op woensdag 24 november 2004 10:02 schreef Roönaän het volgende:
Nou, wat op zich het makkelijkste is, is om eerst alles in style="" te doen.
eventueel kun je hierin onderverdling aanbrengen door te werken met een overkoepelend ID:quote:P {
font-size: 12px;
}
om misschien wat kleine basis-tests te doen met CSS, kun je met het style-attribuut werken, echter wil je het correct leren is het ook belangrijk dat je zo snel mogelijk overgaat tot het compleet scheiden van layout (CSS) en content (HTML-tag-structuur).quote:DIV#main P {
font-size: 11px;
}
Ook dat is gewoonweg af te raden, positionering behoort ook tot het 'layouten' (het regelen van de visuele presentatie van een bepaalde structuur) en te prefereren is om dit altijd gescheiden te houden van de HTML-datastruktuur:quote:Op woensdag 24 november 2004 14:02 schreef Roönaän het volgende:
Schat, het ging hier om positioning issues, niet om font-sizes.
Als ik bezig ben met positioning, doe ik dat met style attributes.
sorry hoor, het spijt me dat ik goedbedoelde raad geef, wat jij kennelijk in je alwetendheid als een belediging van je kunnen aanneemt, dat is echter zo niet bedoeld..quote:Je hoeft mij niet te vertellen hoe je css gebruikt aub.
Juist, die heb je met IE wel maar in Mozilla nietquote:Op woensdag 24 november 2004 19:58 schreef Roönaän het volgende:
Je bedoelt de enorme whitespaces in het menu?
let op het verschil tussen het msie boxmodel, en het standaard boxmodel van w3c, dat toegepast wordt door mozilla, opera en Safari, alswel door msie in non-quirky mode (dus valide code, mét een doctype, ik zou je echter aanraden msie6 gewoon in quirky mode te laten renderen, die is helaas minder buggy, dit kun je doen door en comment boven de doctype te zetten, mozilla negeert die, zoals hoort, maar msie schiet ervan in quirky mode)quote:Op woensdag 24 november 2004 19:56 schreef Chandler het volgende:
tnx roonaan; weer wat geleerd; maar toch ben ik nog niet helemaal wijs met clear:both; deze moet dan toch na de 'linker en rechter' cel?... en niet er voor? tevens heb ik in IE nu het juiste resultaat... maar toch blijft het menu (padding niet goed er uit springen...).
Deze hele idiote gedachtegang (en daarmee de discussie) was er helemaal niet geweest als die kneuzen van W3C gewoon variabelen hadden geintroduceerd.quote:Op woensdag 24 november 2004 14:52 schreef RM-rf het volgende:
Ook dat is gewoonweg af te raden, positionering behoort ook tot het 'layouten' (het regelen van de visuele presentatie van een bepaalde structuur) en te prefereren is om dit altijd gescheiden te houden van de HTML-datastruktuur:
Op het moment van schrijven van de code lijkt het misschien handig, maar als je achteraf wijzigingen aanbrengen in een layout, is het prettiger om hiervoor gewoon een gescheiden CSS-bestand te hoeven aanpassen, dan dat je daarbij hele brokken serverside scripting-code moet doorploegen op zoek naar specifieke style-attributen ...
Ja zo simpel kan het nou zijn, nu moeten de kneuzen van w3c het nog begrijpen...quote:<html>
<style>
$color1 = #ff0000;
div.chapter {
background-color = $color1;
}
</style>
<body background-color="$color1">
</body>
</html>
Kijk eens naar JSSS (JavaScript Style Sheets), de tegenhanger van Netscape voor CSS, geimplementeerd in netscape 4, dat had inderdaad die uitgebreidde scripting-mogelijkheden..quote:Op donderdag 25 november 2004 13:04 schreef markvleth het volgende:
[..]
Deze hele idiote gedachtegang (en daarmee de discussie) was er helemaal niet geweest als die kneuzen van W3C gewoon variabelen hadden geintroduceerd.
voorbeeldje (pseudo):
[..]
Ja zo simpel kan het nou zijn, nu moeten de kneuzen van w3c het nog begrijpen...
Het heeft weinig zin om CSS als techniek allerlei mogelijkheden te geven die nu al best te doen zijn via javascript, mocht je scripting-elementen willen ..quote:<html>
<style>
.setGlobalBgColor, DIV.chapter {
background-color : #f00;
}
DIV.chapter {
font-size: 11pt;
}
</style>
<body class="setGlobalBgColor">
<div class="chapter setGlobalBgColor"></div>
</body>
</html>
Dat kan eenvoudig met attribute selectors, maar ja, Internet Explorer bla bla bla...quote:Op donderdag 25 november 2004 13:53 schreef Roönaän het volgende:
Enige wat ik graag zou zien in css is de ondersteuning voor de verschillende input types
goed gedacht, ik zie dingen graag standaard en berekenbaarquote:#divnaam
{
width: 100px;
padding: 5px;
border: 5px solid black;
}
// maakt samen 5*2 + 5*2 = 20 oftewel 100 - 20 = 80.... toch?
* html #divnaam{
width: 100px; // met borders etc
width: 80px;
}
Forum Opties | |
---|---|
Forumhop: | |
Hop naar: |