1. #1
    Jonathan's Avatar
    Registered
    13/12/05
    Location
    Zwevegem
    Posts
    7,087
    iTrader
    4 (100%)
    Mentioned
    1 Post(s)
    Reputation
    0/50

    HTML/CSS: Verkeerde manier van werken ?

    Hoi ,

    Als beginnend webdesigner ervaar ik regelmatig de problemen van CSS , nu begin ik steeds meer te denken dat ik op een verkeerde manier te werk ga want het lukt maar niet om m'n sites er hetzelfde uit te laten zien in IE7 en Firefox ... ( Opera en Netscape zien er hetzelfde uit als firefox ) .

    Klein voorbeeldje van wat ik nu heb :

    Firefox -> link
    IE7 -> link

    Zoals je kan zien , in internet explorer verdwijnt die ster onder de daarop volgende <div> , z-index + absolute positioneren heeft me hier niet bij geholpen .

    Verder rekt in FF de contentbox niet mee terwijl die dat in IE7 wel doet , dan is er nog de Grijze box die dmv "float: left" tegen de textbox zou moeten staan , in internet explorer lukt dit dan ook , maar in FF gaat die er om de één of andere reden onder ...

    Hier is m'n html en css code ; hopelijk kan iemand me vertellen waar ik verkeerd te werk ga !

    CSS :
    Code:
    @charset "utf-8";
    /* CSS Document */
    
    /****** tags ******/
    
    body {
    	background-image: url(images/bg.gif);
    	background-repeat: repeat;
    }
    
    /****** divs ******/
    
    #window {
    	width: 910px;
    	margin-left: auto;
    	margin-right: auto;
    }
    
    #header {
    	width: 910px;
    	height: 120px;
    	background-image: url(images/header.png);
    	background-repeat: no-repeat;
    }
    
    #logo {
    	width: 910px;
    	text-align: right;
    }
    
    #contentwrap {
    	width: 910px;
    	background-image: url(images/background.png);
    	background-repeat: repeat-y;
    }
    
    
    #actualcontent {
    	width: 540px;
    	margin-top: 80px;
    	margin-left: 30px;
    	float: left;
    }
    
    #userpanel {
    	width: 300px;
    	height: 300px;
    	background-color: #999999;
    }
    
    #upper_border {
    	height: 35px;
    	width: 910px;
    	background-image: url(images/upper_border.png);
    }
    
    #lower_border {
    	height: 35px;
    	width: 910px;
    	background-image: url(images/lower_border.png);
    	text-align: right;
    }
    
    /* menu */
    
    #menu {
    	height: 1px;
    	text-align: left;
    	position: absolute;
    }
    
    #menu ul {
    	padding: 0px;
    	margin-top: 70px;
    	margin-left: 30px;
    }
    
    #menu ul li {
    	display: inline;
    }
    
    #knop {
    	width: 130px;
    	height: 161px;
    	background-image: url(images/reizenkiezer_button.png);
    	float: left;
    	background-repeat: no-repeat;
    	text-align: center;
    }
    
    #currentpage {
    	width: 130px;
    	height: 161px;
    	background-image: url(images/reizenkiezer_button_down.png);
    	float: left;
    	background-repeat: no-repeat;
    	text-align: center;
    }
    
    #knop:hover {
    	background-image: url(images/reizenkiezer_button_over.png);
    }
    
    #menu a {
    	text-decoration: none;
    	color: #333333;
    	font-weight: bold;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	position: relative;
    	top: 125px;
    }
    
    #menu .menutext {
    	text-decoration: none;
    	color: #333333;
    	font-weight: bold;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	position: relative;
    	top: 125px;
    }
    
    #menu a:hover {
    	color: #FFFFFF;
    }
    
    /****** spans ******/
    
    .copyright {
    	color: #663366;
    
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	font-style: italic;
    	margin-right: 25px;
    }
    HTML :
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <title>Titel komt hier</title>
    
    <link href="main.css" type="text/css" rel="stylesheet" />
    
    </head>
    
    <body>
    
    <!-- Start Of Page -->
    
    <div id="window">
    
    <div id="header">
    
    <div id="menu">
    <ul>
    <li><div id="currentpage"><span class="menutext">homepage</span></div></li>
    <li><div id="knop"><a href="about.htm">about us</a></div></li>
    <li><div id="knop"><a href="catalogue.htm">catalogue</a></div></li>
    <li><div id="knop"><a href="contact.htm">contact</a></div></li>
    </ul>
    </div>
    
    <div id="logo">
    <img src="images/jupistar_logo.png" alt="Logo" title="Jupistar Travel Agency" />
    </div>
    
    </div>
    
    <div id="upper_border"></div>
    
    <div id="contentwrap">
    
    <div id="actualcontent">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis rutrum. Vestibulum laoreet est ut sem. Nulla facilisi. Aliquam erat volutpat. Curabitur egestas ligula a nulla. Pellentesque quis sem. Duis consectetuer, justo et convallis dictum, tortor tellus malesuada risus, fringilla aliquam augue felis id nunc. Donec molestie tempus dui. Morbi consequat dapibus justo. Pellentesque justo lorem, blandit ut, tempus et, rhoncus at, metus. Sed nonummy, sem ac imperdiet nonummy, quam neque malesuada velit, eu dictum risus nisi at mi. Suspendisse arcu tellus, lacinia non, imperdiet a, condimentum eget, nisi. Nullam libero. Mauris dolor mauris, blandit a, venenatis eu, consequat nec, metus. Sed arcu sem, fermentum quis, convallis ut, molestie eu, ante. Nullam purus ligula, tincidunt vitae, laoreet sed, euismod ac, est. Fusce ullamcorper. Nullam nunc. 
    
    Pellentesque non erat. Maecenas mauris. Nulla facilisi. Phasellus placerat, ipsum vel dapibus nonummy, elit eros convallis velit, sed pharetra nisi nulla ut erat. Nam scelerisque sem id augue. Mauris nisi dui, aliquet a, ultricies et, dictum mollis, eros. Nullam at dolor et nulla aliquet rhoncus. Phasellus a tortor ut tortor vestibulum dignissim. Suspendisse ornare sapien congue lacus tempus laoreet. Mauris eleifend placerat sem. Quisque dignissim, tortor quis ultrices fermentum, ante neque molestie lectus, non nonummy dui turpis id massa. Fusce sed leo vel turpis rhoncus interdum. In sollicitudin consectetuer tellus. Vivamus lacus enim, tempor eu, mollis eget, pellentesque a, ligula. Mauris lacus arcu, varius euismod, rutrum quis, tempus sed, nibh. Fusce pulvinar, pede nec laoreet ultricies, quam neque lacinia arcu, porttitor convallis eros lectus nec libero. Aliquam tristique hendrerit risus. Duis tincidunt. 
    
    Sed fermentum sapien eget est lacinia faucibus. Sed ut magna. Donec vitae est ac magna tincidunt volutpat. Phasellus imperdiet leo ut mauris. Cras malesuada, diam sit amet viverra dignissim, ipsum pede aliquam orci, vitae lobortis ligula odio rhoncus justo. Nam turpis. Suspendisse est sem, rutrum sed, faucibus in, feugiat sit amet, erat. Vestibulum vitae urna. Duis consectetuer venenatis odio. Etiam ultricies. 
    
    Sed in sapien. Curabitur posuere nisl in nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent sem neque, egestas in, dictum vitae, pharetra quis, dui. Sed id ligula. Vivamus lacus elit, tempus sit amet, vestibulum vitae, interdum vitae, est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi aliquet. Etiam eu lorem. Maecenas nibh. 
    
    Ut vel leo. Vestibulum metus felis, pretium ut, adipiscing at, ornare non, purus. Suspendisse egestas. Cras id lorem ac felis sagittis egestas. Vivamus fringilla. Nulla auctor pede ac ligula. Praesent non ligula id odio aliquet euismod. Phasellus leo. Ut cursus interdum neque. Proin id leo et ligula tempor blandit.
    </div>
    
    <div id="userpanel">
    </div>
    
    </div>
    
    <!-- Copyright -->
    
    <div id="lower_border">
    <span class="copyright">
    Copyright zcdesign 2k7 - author Jonathan V.
    </span>
    </div>
    
    <!-- End Of Page -->
    
    </div>
    
    </body>
    
    </html>
    Mvg
    no votes  

  2. #2
    grooverider's Avatar
    Registered
    08/07/03
    Location
    Leuven
    Posts
    328
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    zou je je site eens online kunnen zetten en ernaar linken? dat werkt veel gemakkelijker (ivm firebug/webdeveloper).

    1 puntje ivm ff: ik zie dat je veel floats gebruikt, daarmee dat de tekst gaat doorlopen voorbij je 'footer'. clear: both; zetten waar het past zal dit euvel al verhelpen.
    Voor je navigatie: je zet in elke li een div? Volgens mij is het ook mogelijk om gewoon je li's (of eventueel a's) zo te stylen, daarvoor een aparte div maken is niet persé nodig (correct me if im wrong). En als je meerdere elementen hetzelfde wil stylen gebruik je best een class (oogt mooier)

    je code ziet er wel al vrij strak uit :-)
    no votes  

  3. #3
    Jonathan's Avatar
    Registered
    13/12/05
    Location
    Zwevegem
    Posts
    7,087
    iTrader
    4 (100%)
    Mentioned
    1 Post(s)
    Reputation
    0/50
    Quote Originally Posted by grooverider View Post
    This quote is hidden because you are ignoring this member. Show
    zou je je site eens online kunnen zetten en ernaar linken? dat werkt veel gemakkelijker (ivm firebug/webdeveloper).

    1 puntje ivm ff: ik zie dat je veel floats gebruikt, daarmee dat de tekst gaat doorlopen voorbij je 'footer'. clear: both; zetten waar het past zal dit euvel al verhelpen.
    Voor je navigatie: je zet in elke li een div? Volgens mij is het ook mogelijk om gewoon je li's (of eventueel a's) zo te stylen, daarvoor een aparte div maken is niet persé nodig (correct me if im wrong). En als je meerdere elementen hetzelfde wil stylen gebruik je best een class (oogt mooier)

    je code ziet er wel al vrij strak uit :-)
    Ok alvast bedankt voor de tips , vannacht of morgen zal ik daar eens voor kijken , vanavond even m'n zinnen verzetten !

    Alvast van harte bedankt !!
    no votes  

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Log in

Log in