Archief - Background positioning

Homer` · 6 nov 2009

Goeiemorgen allemaal

Ik ben onlangs eens terugbegonnen met Dreamweaver, nadat ik het opgegeven, en nu weet ik terug waarom ik het had opgegeven: ik kan het totaal ni

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#maintexttable {
	background-color: #4D90BB;
	height: auto;
	width: 760px;
}

div#mainid {
	width: 840px;
	margin-left: auto;
	margin-right: auto;
	background-image: url(sunburst.png);
	background-repeat: no-repeat;
	[COLOR="Red"][B]background-position: center top;[/B][/COLOR]
	text-align: center;
}
body {
	background-image: url(bgpattern.jpg);
	background-repeat: repeat;
}
-->
</style>
</head>

<body>
<div id="mainid">
<img src="maintextboven.gif" width="760" height="30" id="maintextboven"/>
  <table width="760" border="0" id="maintexttable" align="center">
    <tr>
      <td height="40"></td>
    </tr>
  </table>
  <img src="maintextonder.gif" width="760" height="30" id="maintextonder"/>
  <p>&nbsp;</p>
</div>
</body>
</html>

Maar, dit is wat ik krijg:

De background (sunburstachtig ding) is niet 'top' aligned..

Iemand een idee?

teh_NiHiLiM · 6 nov 2009

div#mainid {
margin: 0 auto;
}

Homer` · 6 nov 2009

teh_NiHiLiM zei:
div#mainid {
margin: 0 auto;
}

Dit werkt niet..
Dit wel:

Code:

body {
	background-image: url(bgpattern.jpg);
	background-repeat: repeat;
	margin: 0px;
	padding: 0px;
}

Hier zullen geregeld nognieuwe vragen bijkomen

teh_NiHiLiM · 6 nov 2009

ah; het was de padding van de body die nog standaard stond

t'is irritant da elke browser zijn 'ding' doet voor standaard waarden. ipv alles default 0 te nemen <_<

Dieterg · 6 nov 2009

watch and learn!

Homer` · 6 nov 2009

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
-->
</style>
<link href="css/mainttexttable.css" rel="stylesheet" type="text/css" />
<link href="css/trompetdiv.css" rel="stylesheet" type="text/css" />
<link href="css/sunburstdiv.css" rel="stylesheet" type="text/css" />
<link href="css/body.css" rel="stylesheet" type="text/css" />
<link href="css/logindiv.css" rel="stylesheet" type="text/css" />
<link href="css/buttonbalkdiv.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div id="trompetdiv">
    <div id="sunburstdiv">
    	<div id="logindiv"></div>
 		<div id="buttonbalkdiv"></div>
		<div id="texttablediv">
   	  		<img src="https://www.beyondgaming.be/forums" width="760" height="7" id="maintextboven"/>
	  		<table width="760" border="0" id="maintexttable" align="center">
      		<tr>
        	<td height="800"></td>
       		</tr>
            </table>
    		<img src="https://www.beyondgaming.be/forums" width="760" height="7" id="maintextonder"/>
		</div>
	  <p>&nbsp;</p>
    </div>
</div>
</body>
</html>

Dit heb ik tot nu toe. Dit ziet er zo uit:

Hebben jullie opmerkingen over de code? Ik heb zoals jullie zeiden alles in aparte style sheets gezet, maar ik weet nog altijd niet zeker of ik div tags juist gebruik? :?

Alleszins bedankt!

Drone · 6 nov 2009

Maak jij nu voor elke stijl een nieuw css document? Je kan meerdere stijlen in 1 document zetten. Wat ik zeker zou aanraden is met dreamweaver te stoppen tot als je html/css kent. Probeer gewoon notepad of een andere eenvoudige texteditor.

Homer` · 6 nov 2009

[drone]-[1.05];12436801 zei:
Maak jij nu voor elke stijl een nieuw css document? Je kan meerdere stijlen in 1 document zetten. Wat ik zeker zou aanraden is met dreamweaver te stoppen tot als je html/css kent. Probeer gewoon notepad of een andere eenvoudige texteditor.

Ja, dit is veel handiger, dan weet ik altijd dat ik in het juiste aan het werken ben. En nee hoor, ga ik niet mee stoppen. Zeg me dan wat er fout is?

adrianhates · 6 nov 2009

dreamweaver heeft veel te veel functies voor een beginner.
notepad++ is aan te raden voor u

Homer` · 6 nov 2009

adrianhates zei:
dreamweaver heeft veel te veel functies voor een beginner.
notepad++ is aan te raden voor u

Wel, ik heb een handleidingboekske voor Dreamweaver en ik ga het gebruiken ook. Het is niet omdat iets veel functies heeft dat ge het ni kunt proberen hé.

(is er dan niemand die gewoon kan zeggen wat er mis is aan m'n code, als het dan toch zo slecht is?)

Zero Grav · 6 nov 2009

Uhm, 't is geen slim idee om alles in aparte stylesheets te zetten. Hoe minder requests er naar de server gedaan moeten worden, hoe beter. 't Heeft ook helemaal geen nut voor u als developer.

Lege divs zijn veelal al een goeie indicatie dat er iets mis is met uw code. Ge gebruikt ook de image tag voor afbeeldingen die eigenlijk niet als content bedoeld zijn, afbeeldingen die tot het design behoren voegt ge normaal in met de background property van css.

Ge gebruikt dan ook nog een table om uw content te structureren. 't Lijkt mij dat ge enkel en alleen tekst en een paar afbeeldingen in die table wilt smijten? Dan zouden dat gewoon h's, p's en images moeten zijn omringd door een div.

Tables in html gebruikt ge alleen voor tabulaire data (alles wat ge ook in excel zoudt maken normaal). Grids waar ge data in gaat zetten dus, nergens anders voor. En neen, ook niet om een formulier op te maken.

Benamingen aan divs geven kunt ge ook best doen naar functie, niet naar uiterlijk. Ge hebt nu TrompetDiv enzo, straks gaat ge daar een trommel zetten en dan slaat die naam op niets meer. Ge hebt een container, een mainbalk een subbalk enzovoort. Zo'n namen geven meer een idee over de functie die het element gaat vervullen dan over zijn uiterlijk.

De structuur zit gewoon fout.

Unrach · 6 nov 2009

adrianhates zei:
dreamweaver heeft veel te veel functies voor een beginner.
notepad++ is aan te raden voor u

Ik verberg alle vensterkes in dreamweaver, ik type alles met de hand. Dan zie ik ook tegoei wat ik doe en wordt er geen "crap-code" gegenereerd. Ik kan evengoed ne textedit gebruiken, ma die intellicence en preview mode van dreamweaver is wel handig ^^

Homer` · 6 nov 2009

Zero Grav zei:
Uhm, 't is geen slim idee om alles in aparte stylesheets te zetten. Hoe minder requests er naar de server gedaan moeten worden, hoe beter. 't Heeft ook helemaal geen nut voor u als developer

Dit is nog tijdelijk, ik zal het uiteindelijk wel samen gieten

Lege divs zijn veelal al een goeie indicatie dat er iets mis is met uw code. Ge gebruikt ook de image tag voor afbeeldingen die eigenlijk niet als content bedoeld zijn, afbeeldingen die tot het design behoren voegt ge normaal in met de background property van css.

Die divs zijn nu nog leeg omdat er nog content in moet komen.. Ik zou niet weten hoe je die afbeeldigen anders kan zetten zodat je toch nog die ruimte ertussen hebt. Dit is veel simpeler vind ik persoonlijk

Tables in html gebruikt ge alleen voor tabulaire data (alles wat ge ook in excel zoudt maken normaal). Grids waar ge data in gaat zetten dus, nergens anders voor. En neen, ook niet om een formulier op te maken.

Is al een div van gemaakt

Benamingen aan divs geven kunt ge ook best doen naar functie, niet naar uiterlijk. Ge hebt nu TrompetDiv enzo, straks gaat ge daar een trommel zetten en dan slaat die naam op niets meer. Ge hebt een container, een mainbalk een subbalk enzovoort. Zo'n namen geven meer een idee over de functie die het element gaat vervullen dan over zijn uiterlijk.

Dat is natuurlijk puur eigen smaak he, maar ik zal er eens over denken.

adrianhates · 6 nov 2009

Homer` zei:
Dat is natuurlijk puur eigen smaak he, maar ik zal er eens over denken.

Dat is gewoon bad practise

Zero grav's way is the way to do it.

Zero Grav · 6 nov 2009

Het niet doen speelt uiteindelijk alleen maar in uw nadeel, binnen een paar jaar gaan we XHTML 1.0 weer allemaal achter ons gezet hebben en overgaan op HTML 5.0. Deze versie biedt vernieuwingen zoals nav, footer, header, .. Als ge nu al rekening houdt met die namen gaat het gewoon veel gemakkelijker worden om uiteindelijk over te schakelen.

xHTML en CSS heeft gewoon veel regels, en sommige van die regels (zoals semantiek: het juiste element op de juiste plaats gebruiken) zijn dingen die ge uzelf moet opleggen omdat ge ze nergens kunt controleren.

Spatie tussen verschillende elementen houden en dergelijke doet ge gewoon met margins.

<div id="footer">
<p>Blablablabla</p>
</div>

#footer {
background-image: url("......");
margin-top: 20px; /* Zorgt ervoor dat dit element 20 pixels naar beneden gaat */
height: 50px;
}

Homer` · 6 nov 2009

Ok, bedankt

1. Weet er iemand hoe je de padding van 1 cel binnen een spry menu kan aanpassen? Of maw hoe ik ervoor kan zorgen dat heel mijn menu op 1 lijn raakt zonder de tekst te veel te verkleinen?

2. Hoe raak ik die hyperlinkliijn rond mijn logo kwijt? Want normaal staat in het css van spry al dat er geen text-decoration is

3. hoe krijg ik het zo dat de pijltjes van de dropdownmenus verder van het woord staan? (maar een pixel of 2/3)

4. Hoe kan ik in een dropdownmenu 2 kolommen krijgen naast elkaar?

http://i1005.photobucket.com/albums/af179/BramV/FF1.jpg

http://i1005.photobucket.com/albums/af179/BramV/dw1.jpg

Drone · 6 nov 2009

We zouden is een discussie moeten starten over HTML5 dan kan iemand mij overtuigen waarom het zo goed is.

Fr3aK · 6 nov 2009

Homer` zei:
Ok, bedankt

1. Weet er iemand hoe je de padding van 1 cel binnen een spry menu kan aanpassen? Of maw hoe ik ervoor kan zorgen dat heel mijn menu op 1 lijn raakt zonder de tekst te veel te verkleinen?

2. Hoe raak ik die hyperlinkliijn rond mijn logo kwijt? Want normaal staat in het css van spry al dat er geen text-decoration is

3. hoe krijg ik het zo dat de pijltjes van de dropdownmenus verder van het woord staan? (maar een pixel of 2/3)

4. Hoe kan ik in een dropdownmenu 2 kolommen krijgen naast elkaar?

http://i1005.photobucket.com/albums/af179/BramV/FF1.jpg

http://i1005.photobucket.com/albums/af179/BramV/dw1.jpg

1) Dan gaat ge het LI-element waar ge de padding van wilt aanpassen een (extra) class moeten geven vermoed ik, in CSS bepaal je dan de padding van dat element.

2) a img { text-decoration: none; }

Voor 3) en 4) kan ik u niet helpen zonder dat ge uw website ergens online gooit...

Voor al uw verdere vragen ivm dat Spry framework: Spry

Homer` · 6 nov 2009

Dit lukt me niet, het is precies onmogelijk een listitem andere padding te geven.. En ook krijg ik die rand niet weg rond mijn logo, ook niet door een andere class noch id..

Zero Grav · 6 nov 2009

Ik begrijp niet waarom ge niet gewoon een xHTML/CSS tutorial doorneemt als ge het wilt leren. Nu gaat ge voor elk ding dat ge wilt bereiken moeten vragen hoe ge het moet doen?

De property die ge zoekt om dropdownmenu's langs elkaar te krijgen is float en om ze langer te maken gebruikt ge gewoon de width.

Die rand die em plaatst is geen text-decoration (images zijn geen tekst, logisch) maar een border. Dus a img { border: 0 }

En een list-item een padding geven is niet onmogelijk, again lees een xhtml/css cursus en ge komt de property display wel tegen met waarde block.

Archief - Background positioning

Homer`

Legacy Member

teh_NiHiLiM

Legacy Member

Homer`

Legacy Member

teh_NiHiLiM

Legacy Member

Dieterg

Legacy Member

Homer`

Legacy Member

Drone

Legacy Member

Homer`

Legacy Member

adrianhates

Legacy Member

Homer`

Legacy Member

Zero Grav

Legacy Member

Unrach

Legacy Member

Homer`

Legacy Member

adrianhates

Legacy Member

Zero Grav

Legacy Member

Homer`

Legacy Member

Drone

Legacy Member

Fr3aK

Legacy Member

Homer`

Legacy Member

Zero Grav

Legacy Member