Archief - Button maken van afbeelding?

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
f

fiestaboyke

Legacy Member
Ik ben aan het proberen mijn huidige website de bovenste balk te vervangen door buttons maar zou graag diezelfde achtergrond hebben maar weet niet goed hoe te beginnen. Ikzelf werkt met Dreamweaver Cs5, iemand die me kan helpen?

Dit is de website : Königsblau Vlaanderen

in de stylesheet heb ik wel de afbeelding gevonden voor de huidige knop maar ik ben er niets mee, mss jullie? Heb deze trug gevonden in de map images onder de naam : nav_link. Het is een png bestand, afmeting is 1x64 ....
D

Dieterg

Legacy Member
Hoe heb je deze site dan gemaakt? Ken je iets van HTML? Of heb je ergens een template gedownload en aangepast? Want de code is niet echt goed..

voor de navigation kan je beter een list gebruiken!

Je gebruikt 2x het id #navigation. Een ID mag je maar 1x gebruiken op een pagina dus hier moet een class van gemaakt worden!

HTML: 
		  <h2>&nbsp;</h2> 
		  <h2>&nbsp;</h2>

Als je enters wil moet je padding/margin toevoegen op je h2 tag.

Nog 1 opmerking je gebruikt belstat counter
HTML: 
<!-- Start of belstat.be Counter --> 
<script type="text/javascript"> 
		<!--
		d=document;
		pag="";col="";scr=0;b=navigator.appName;
		scr=screen.width+"*"+screen.height;
		ref=parent==self ? escape(window.document.referrer) : escape(top.document.referrer);
		pag=escape(d.URL);
		if (b != "Netscape") {col=screen.colorDepth}
		else {col=screen.pixelDepth}
		if(col=="undefined"){col="";}
		d.write("<a href=http://www.belstat.be/viewstat.asp?UserID=schalke&" + "amp;" + "lang=nl target=_blank><img border=0 src=\"http://www.belstat.be/regstat.aspx?");
		d.write("UserID=schalke&BColor=blue&refer=" + ref + "&pag=" + pag + "&b=" + b + "&col=" + col + "&scr=" + scr);
		d.write("\" align=center width=16 height=16 alt=\"Monitored by BelStat - Your Site Counts\"><\/a>");
		// -->
</script> 
<!-- End of belstat.be Counter -->
Ik kan u zeker en vast google analytics aanraden!
f

fiestaboyke

Legacy Member
Ik ken ondertussen al wel 'iets' van HTML maar ben zeker nog een beginner ... Heb in de tijd een template gedownload en zo aangepast stuk voor stuk ja ... Ik gebruik idd belstat, dit omwille dat de 'sponsor' van onze site dit zo wil dus dat kan ik spijtig genoeg niet wijzigen ...

Kan jij me wat meer uitleg geven dan over die list, wat dit juist is en wat het doet?

ook dit begrijp ik niet 100% wat je hier mee wil zegge ...

"Als je enters wil moet je padding/margin toevoegen op je h2 tag. "

Greetz
D

Dieterg

Legacy Member
Ja je moet in dreamweaver eens omswitchen naar 'code view' daar zie je veel van die &nbsp; staan. Dat zijn enters maar je kan dit ook simpel oplossen door margin te gebruiken in css. Je hebt ook een file genaamd 'style.css'.

Als je hier nu bv het volgende aan toevoegd
HTML: 
h2 {
   margin: 10px 0 10px 0; 
}

dan zal ELK h2 element in uw website een margin krijgen van 10px top en 10px bottom!

Je kan het ook specifieker doen
HTML: 
#content h2 {
   margin: 10px 0 10px 0; 
}
Nu zal de margin top en bottom enkel worden toegevoegd op de div met het id content.. Kijk maar eens in je HTML code daar staat 'div id="content" '.

Ik bedoel met de list het volgende.
HTML: 
<ul>
     <li><a href="home.html">Home</a></li>
     <li><a href="contact.html">Contact</a></li>
     ....
</ul>

Als je hier nu op de ul en de li CSS toevoegt word voor elke list die je aanmaakt deze style toegevoegd.
Voorbeeld.
f

fiestaboyke

Legacy Member
Waar moet ik die regel dan juist zetten? Ja, ken dreamweaver nu al een beetje en werk zowel in het ontwerp als in het code gedeelte, kwestie dat ik toch iets bijleer als ik iets schrijf .... Als ik het style doc open heb ik dit

html { height: 100%; }

body {
height: 100%;
background-color: #75767a;
background-image: url("img/background_main.png");
background-position: top center;
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 75%;
background-repeat: repeat-y;
margin: 0px;
color: #D6D6D6
}

#mainContainer {
border: 1px solid #3d3d3d;
background-image: url("img/content_main.png");
background-repeat: repeat-y;
margin: 0 auto;
width: 1000px;
padding: 0;
text-align: left;
}

.left { float: left; }
.right { float: right; }

/*===================================*/

#header {
background-color: #333333;
background-image: url("img/banner_main.png");
height: 177px;
margin: 0;
padding: 0;
}

#header .box { padding: 56px 16px; margin: 0; }
#header h2 {
font-weight: normal;
font-size: 24px;
color: #929db5;
margin: 0;
}
#header h3 {
font-weight: normal;
font-size: 18px;
color: #CCCCCC;
margin: 0;
}

/*===================================*/

#navigation {
background-color: #47526a;
background-image: url("img/navigation_main.png");
height: 32px;
margin: 0;
padding: 0;
}

#topShadow {
background-image: url("img/content_shadow.png");
height: 29px;
margin: 0;
padding: 0;
}

div.navi {
float: left;
width: 165px;
height: 32px;
margin: 0;
padding: 0;
background: url("img/nav_link.png");
background-position: 0 -38px;
border-right: 1px solid #2d333f;
}

#navigation a {
display: block;
width: 100%;
height: 22px;
color: #a1adc5;
font-weight: bold;
text-decoration: none;
text-align: center;
margin: 0;
padding-top: 8px;
background: url("img/nav_link.png");
background-position: 0 0;
}

#navigation a:hover { background-image: none; }

/*===================================*/

#content {
line-height: 20px;
word-spacing: 2px;
text-align: justify;
width: 819px;
float: left;
position: relative;
margin-bottom: 32px;
}

#content .box { padding: 0 16px; margin-bottom: 16px; }

#content .spacer {
background-image: url("img/content_spacer.png");
height: 29px;
margin: 0;
padding: 0;
}


#content h2 {
font-size: 16px;
font-weight: bold;
color: #D6D6D6;
margin: 0 10px 0 0;
}

#content h2 a { text-decoration: none; font-weight: bold; }

#content h3 {
font-size: 12px;
font-weight: bold;
color: #ffffff;
margin: 0 10px 0 0;
}

#content a { color: #929db5; text-decoration: none; }
#content a:hover { color: #b4bfd7; }
#content img.border { padding: 1px; background-color: #6d6d6d; border: 1px solid #3e3e3e; margin-left: 8px; margin-right: 8px; }



/*===================================*/

#sidebar {
width: 181px;
float: right;
position: relative;
}

#sidebar .box { padding: 0 10px; }

#sidebar .spacer {
background-image: url("img/sidebar_spacer.png");
height: 29px;
margin: 0;
padding: 0;
}

#sidebar h3 {
font-size: 13px;
font-weight: bold;
color: #838ea3;
margin: 0 0 16px 0;
}

#sidebar p {
font-size: 11px;
line-height: 20px;
word-spacing: 1px;
color: #F0F0F0;
}

#sidebar img { margin: 0; padding: 1px; background-color: #556076; border: 1px solid #394150; }
#sidebar ul { padding: 0; margin: 0; }
#sidebar li { list-style-type: none; padding-left: 16px; padding-top: 7px; }
#sidebar a { color: #a1adc5; text-decoration: none; }
#sidebar a:hover { text-decoration: underline; }

/*===================================*/

#bottomShadow {
background-image: url("img/content_bShadow.png");
height: 29px;
margin: 0;
padding: 0;
clear: both;
position: relative;
}

#footer {
background-image: url("img/footer_main.png");
height: 49px;
margin: 0;
padding: 0;
clear: both;
position: relative;
}

#footer .box {
text-align: center;
margin: auto;
padding-top: 16px;
font-size: 9px;
font-style: italic;
}

#footer a { color: #a1adc5; }
.rood {
color: #C00;
}
blauw {
color: #00F;
}
.blauw {
color: #00F;
}
.rood {
color: #F00;
}
.blauwetekstkleur {
color: #929db5;
}
D

Dieterg

Legacy Member
Jep dat weet ik dat is CSS.

als je daar nu aan toevoegt wat ik zei zou je normaal padding en margin moeten hebben op je h2 je kan dit ook toevoegen op paragrafen 'p' tags!
k

krulle3

Legacy Member
Misschien is het handig voor u om u site even door iemand te laten verbeteren?
Zo ga je er véél meer uit leren hoor. Bekijk de code van websites met de element inspector van Google Chrome. ECHT HANDIG hoor :)
f

fiestaboyke

Legacy Member
mja, zou mss handiger zijn maar ik doe liefst alles zelf en probeer ook zo dan mijn fouten te laten verbeteren door via op het forum wat hulp te vragen ...
k

krulle3

Legacy Member
of schaf je een boek aan over CSS. Het zal je veel beter gaan.
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan