Het Web ontwikkelaars Topic [deel 2]

BeZaX · 27 mrt 2009

Dat zeg ik al in mijn post...

[2k] · 27 mrt 2009

Ah ok, verkeerd gelezen.

Elendill2003 · 11 apr 2009

http://www.webpagesthatsuck.com/mysterymeatnavigation.html#

Hilarische website over webdesign fouten.

WinterBase · 12 apr 2009

Even een kleine vraag Ben een Wordpress CSS file aan het aanpassen en er zit een functie bij om een plaatje van 100 bij 100 pixels aan je post toe te voegen. Dat lukt maar de border, die witte krijg ik niet goed om de afbeelding heen. Als ik de maten verander verplaatst ie de border maar het plaatje laat ie staan. Snappie?

BeZaX · 13 apr 2009

Plaats ff een stukje HTML/CSS... dat maakt het net ff makkelijker. Ik weet wrs al wel hoe het in elkaar zit.

WinterBase · 13 apr 2009

Het is me inmiddels gelukt Ben een tijdje bezig geweest maar met wat aanpassingen aan de margin en padding van het frame wat om het plaatje heen moet is het gelukt Tnx anyway, BeZaX!

Beumah · 13 apr 2009

Ik heb een probleempje met Firfox en IE. IN IE komt de lay-out wel gewoon zo als hij moet maar in Firefox zet hij alles gewoon links neer.
Weet iemand wat ik fout doe.

IE
[IMG]

Firefox

Code (css)

Code:

body{
margin: 0;
text-align:center;
background-image: url(images/body_bg.JPG);
background-repeat: no-repeat;
background-position: 50px 250px;
color: #656556;
font-size: 62.5%;
}

div#main_container {
margin: 0;
width: 750px;
height: auto;
height: 100%;
min-height: 100%;
text-align:left;
background-image: url(images/bg.JPG);
background-position: left;
background-repeat: repeat-y;
background-color: #FFFFFF;
}

div#box_header {
background-image: url(images/header.jpg); 
width: 100%;
height: 250px;
}

div#box2 {
background-image: url(images/boven_bg.JPG);
float: left;
width: 100%;
height: 20px;
}

<!-- Navigatie -->

#menu3 {
background-color: #FFFFFF;
background-image: url(images/bg.JPG);
background-position: left;
background-repeat: repeat-y;
float: left;
width: 20%;
height: auto;
border-right: 0px;
padding: 20px 20px 20px 20px;
font-family: verdana;
font-size: 1.2em;
}
	
#menu3 ul{
	list-style: none;
	margin: 0;
	padding: 0;
	}
	
#menu3 ul ul{
	list-style: none;
	margin: 0 0 0 15px;
	padding: 0;
	}	
	
#menu3 li a {
	height: 32px;
  	voice-family: "\"}\""; 
  	voice-family: inherit;
  	height: 24px;
	text-decoration: none;
	font-size: 1.2em;
	}	
	
#menu3 li a:link, #menu3 li li a:link {
	color: #656556;
	display: block;
	padding: 15px 0 5px 20px;
	}
	
#menu3 li a:visited, #menu3 li li a:visited {	
	color: #656556;
	display: block;
	padding: 15px 0 5px 20px;
	}

#menu3 li a:hover, #menu3 li li a:hover {
	color: #474739;
	background:  url(images/menu.gif);
	padding: 15px 0 5px 20px;
	}
	
#menu3 .visited {
 	background:  url(images/menu.gif);
	background-repeat: no-repeat;
}

<!-- Content -->

div#box_content {
background-color: #FFFFFF;
background: url(images/bg.JPG);
background-repeat: repeat-y;
background-position: right;
float: left;
width: 80%;
height: 490px;
border-left: 0px;
padding: 15px 20px 10px 20px;
font-family: verdana;
font-size: 1.2em;
}

.p1{
font-family: verdana;
font-size: 1.0em;
}

.p2{
font-family: verdana;
font-size: 1.2em;
}

.p3{
font-family: verdana;
font-size: 10pt;
text-decoration: underline;
}

.l1 {
padding: 2px;
}

#box_content h2 {
	font-size: 1.9em;
	font-weight: 500;
	}

#box_content h3 {
	font-size: 1.3em;
	font-weight: 300;
	}

#box_content .home_p1{
 text-align: left;
 font-size: 1.2em;
 } 

#left {
	float: left;
	margin: 0 25px 10px 0;
	border: 0px solid grey;
	}

#right {
	float: right;
	}

.left {
 float: left;
 }

.contact {
list-style: none;
}

<!-- Footer -->

div#box_footer {

background: url(images/footer_bg.jpg);
float: left;
width: 100%;
height: 50px;
padding: 15px 20px 10px 20px;
font-family: verdana;
font-size: 8pt;
text-align: center;
}

Gdzr · 13 apr 2009

Wat is je doctype?

Beumah · 13 apr 2009

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Gdzr · 13 apr 2009

Maak er is dit van:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Beumah · 13 apr 2009

Dan staat het ook niet goed meer in IE en in Firefox veranderd er nix.

Gdzr · 13 apr 2009

Voor ie moet je nu die links in de plaatjes veranderen.

Je hebt nu staan (images/...) hier moet je dan van maken ('images/.....')

Staat je site eigenlijk in een main div? Met daaronder de content?

Want dan kan je makkelijk alignen.

Ik heb het zo gedaan:
Code:
body
{

	background-color: #040404;
	color: #6c5539;
	padding: 0px;
	margin-top: 0px;
	font-size: 11px;
	font-family: "Lucida Handwriting";

}
div#main_container
{
	margin: 0px auto!important;
	width: 794px;
	text-align: left;
}
en dan de rest in de main container zetten.

TweaK · 13 apr 2009

Hoe kies je eigenlijk de doctype? Ik bedoel, ik snap niet wat precies het verschil tussen alle doctypes is. Ik dacht dat er gewoon één standaard was? Worden doctypes gebruikt om de browser eventueel te vertellen dat er een ouder standaard van HTML wordt gebruikt en dat hij het dus uiteraard dan volgens het oude standaard parsed, of wat?

Wat ik nu heb is dat ik een website heb gemaakt in valid XHTML/CSS maar ik bedacht me achteraf pas (toen ik de XHTML/CSS ging validaten) dat ik uiteraard een doctype had moeten declareren.. Dat heb ik niet gedaan, dus uiteraard is het nu bar gesteld met de website... Maar goed, als ik achteraf nu bijv XHTML 1.0 doctype toevoeg, veranderd de hele layout van de site ineens.

Beumah · 14 apr 2009

Ja, heb alles in een Main div staan. (zie code)

En als ik die Doctype van jou gebruik, dan zet IE de Lay-out weer in de war. Dan zet hij de content in een keer onder de Nav ipv ernaast. Terwijl er dan in Firefox, nog nix veranderd.

Code:

body{
margin: 0;
text-align:center;
background-image: url(images/body_bg.JPG);
background-repeat: no-repeat;
background-position: 50px 250px;
color: #656556;
font-size: 62.5%;
}

div#main_container {
margin: 0;
width: 750px;
height: auto;
height: 100%;
min-height: 100%;
text-align:left;
background-image: url(images/bg.JPG);
background-position: left;
background-repeat: repeat-y;
background-color: #FFFFFF;
}

div#box_header {
background-image: url(images/header.jpg); 
width: 100%;
height: 250px;
}

div#box2 {
background-image: url(images/boven_bg.JPG);
float: left;
width: 100%;
height: 20px;
}

<!-- Navigatie -->

#menu3 {
background-color: #FFFFFF;
background-image: url(images/bg.JPG);
background-position: left;
background-repeat: repeat-y;
float: left;
width: 20%;
height: auto;
border-right: 0px;
padding: 20px 20px 20px 20px;
font-family: verdana;
font-size: 1.2em;
}
	
#menu3 ul{
	list-style: none;
	margin: 0;
	padding: 0;
	}
	
#menu3 ul ul{
	list-style: none;
	margin: 0 0 0 15px;
	padding: 0;
	}	
	
#menu3 li a {
	height: 32px;
  	voice-family: "\"}\""; 
  	voice-family: inherit;
  	height: 24px;
	text-decoration: none;
	font-size: 1.2em;
	}	
	
#menu3 li a:link, #menu3 li li a:link {
	color: #656556;
	display: block;
	padding: 15px 0 5px 20px;
	}
	
#menu3 li a:visited, #menu3 li li a:visited {	
	color: #656556;
	display: block;
	padding: 15px 0 5px 20px;
	}

#menu3 li a:hover, #menu3 li li a:hover {
	color: #474739;
	background:  url(images/menu.gif);
	padding: 15px 0 5px 20px;
	}
	
#menu3 .visited {
 	background:  url(images/menu.gif);
	background-repeat: no-repeat;
}

<!-- Content -->

div#box_content {
background-color: #FFFFFF;
background: url(images/bg.JPG);
background-repeat: repeat-y;
background-position: right;
float: left;
width: 80%;
height: 490px;
border-left: 0px;
padding: 15px 20px 10px 20px;
font-family: verdana;
font-size: 1.2em;
}

.p1{
font-family: verdana;
font-size: 1.0em;
}

.p2{
font-family: verdana;
font-size: 1.2em;
}

.p3{
font-family: verdana;
font-size: 10pt;
text-decoration: underline;
}

.l1 {
padding: 2px;
}

#box_content h2 {
	font-size: 1.9em;
	font-weight: 500;
	}

#box_content h3 {
	font-size: 1.3em;
	font-weight: 300;
	}

#box_content .home_p1{
 text-align: left;
 font-size: 1.2em;
 } 

.left_div {
	float: left;
	margin: 0 25px 10px 0;
	border: 0px solid grey;
	}

#right {
	float: right;
	}

.left {
 float: left;
 }

.contact {
list-style: none;
}

<!-- Footer -->

div#box_footer {

background: url(images/footer_bg.jpg);
float: left;
width: 100%;
height: 50px;
padding: 15px 20px 10px 20px;
font-family: verdana;
font-size: 8pt;
text-align: center;
}

Gdzr · 14 apr 2009

Hmm, zet de doctype is terug en verander de margin van je main container naar
0px auto!important;

Beumah · 14 apr 2009

Dat gaat al wat beter. In IE, staat het nog gewoon goed en in Firefox staat het wel allemaal maal goed in het midden. Aleen klopt het nog niet helemaal, zie plaatjes.

IE

Firefox

Edit: Thnx voor je hulp so far, maar ik duik nu ff me bedje in en kijk morgen weer verder.

Beumah · 14 apr 2009

Kan het misschien hierdoor komen?

Pim · 14 apr 2009

http://athena-hi.fontys.nl/users/183631/

Pfoew, mijn eerste website tot nu toe. Beetje een haastklus geworden door wat slechte planning
Gemaakt in 1 dag zonder dat ik echte kennis had van HTML/CSS.
Komende week aan de nieuwe talen beginnen.

1 probleempje though. Als je in IE/Chrome naar de Graphics pagina gaat, staan de foto's op de onderste regel naast elkaar; in FF onder elkaar. Geen idee hoe ik die eruit krijg, en daar is het ook een beetje laat voor.
Echter; als iemand een oplossing weet, do tell!

Ook moet ik wat netter worden met css en html gescheiden houden; heb het nog voor het gemak wat door elkaar staan. Anyway, kom maar op met die feedback

edit: oh, let niet op de inhoud, gewoon wat dingen die ik neergesmeten heb. Enige wat bekeken mag worden is mijn Glossy

Rivanov · 14 apr 2009

Doe jij IMD?!
Daar hoop ik over 2 maanden in af te studeren!
Welk jaar zit jij?

TweaK · 14 apr 2009

Pim; Zeker geen slechte site voor een eerste website, maar tables... Een vrij oude manier om websites vorm te geven en tegenwoordig redelijk "frowned upon". Tables mogen eigenlijk alleen nog maar gebruikt worden voor dat waar de naam voor staat - als je effetjes een tabelletje ergens wilt neergooien.

Voor vormgeving moet je toch naar XHTML/CSS kijken en dan met divs, spans, etc werken. Je gebruikt verder wel <p class="blabla"> met CSS e.d. dus dat is mooi, maar het skelet van de HTML is toch wel een tabel.

Maar ja, zoals ik zei, zeker niet slecht voor een eerste keer. Op het technische aspect na, dus als we puur esthetisch kijken, misschien het lettertype van het menu aanpassen?

Aanmelden

Het Web ontwikkelaars Topic [deel 2]

BeZaX Plop...

[2k] XBW.nl VIP XBW.nl VIP

Elendill2003 For those who gave

WinterBase #VOTEFORRECKA XBW.nl VIP

BeZaX Plop...

WinterBase #VOTEFORRECKA XBW.nl VIP

Beumah ----

Gdzr Hmmm?

Beumah ----

Gdzr Hmmm?

Beumah ----

Gdzr Hmmm?

TweaK Active Member

Beumah ----

Gdzr Hmmm?

Beumah ----

Beumah ----

Pim XBW.nl VIP XBW.nl VIP

Rivanov Apple Fanboy

TweaK Active Member

Deel Deze Pagina

Aanmelden

Nuttige Zoekopdrachten

Het Web ontwikkelaars Topic [deel 2]

BeZaX Plop...

[2k] XBW.nl VIP XBW.nl VIP

Elendill2003 For those who gave

WinterBase #VOTEFORRECKA XBW.nl VIP

BeZaX Plop...

WinterBase #VOTEFORRECKA XBW.nl VIP

Beumah ----

Gdzr Hmmm?

Beumah ----

Gdzr Hmmm?

Beumah ----

Gdzr Hmmm?

TweaK Active Member

Beumah ----

Gdzr Hmmm?

Beumah ----

Beumah ----

Pim XBW.nl VIP XBW.nl VIP

Rivanov Apple Fanboy

TweaK Active Member

Deel Deze Pagina