CSS probleem??

Status
Niet open voor verdere reacties.
K

Koenie

Gebruiker
Lid geworden
14 mei 2004
Berichten
312
Hallo,

Ik heb een website gemaakt op basis van css.
Op een kleiner beeldscherm heb ik het volgende probleem;

Als je door de website heen "loopt" dan staat de rechterkolom op alle pagina's goed behalve op de contactpagina.

Hoe kan dit, en wie weet de oplossing voor mij?

(om het bestand zo klein mogelijk te houden heb ik hem zonder foto's geupload)
gr.

Monique
 

Bijlagen

  • test 5.rar
    13,8 KB · Weergaven: 10
Koenie,
Zet dat eens online dat we dat kunnen bekijken of plaats de code hier. Ik ben nml niet zo gretig om rar en zip bestanden op mijn pc te plaatsen en dan te openen. Als je snapt wat ik bedoel.
Mvg
Defietser
 
door omstandigheden niet in de gelegenheid om hem online te zetten.
hier dus maar even de code.
voor alle duidelijkheid nog maar eens;
op alle pagina's geeft ie een goed beeld, alleen bij de contactpagina wordt de rechterkolom onder de middenkolom gezet (bij een kleiner beeldscherm).

Code: 
BODY{
margin: 0;
Padding: 0;
background-color: #454545;
color: #ae0004;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0px;

}

#wrap {
width: 790px;
height: auto;
margin: 0px;

}

#header {
width: 790px;
height: 120px;
background-image:url(../IMG/Logo2.jpg);
background-repeat:no-repeat;

}

#menu{
width: 790px;
height: 25px;
margin-top:0px;
background-color:#7d6642;

}

.left {
margin-top: 0px;
float:left;
width:195px;
height: 600px;
background-color:#e7e0ce;

}

.middle {
margin-top: 0px;
float: left;
width: 400px;
height: 600px;
background-color:#e7e0ce;

}
.middle_title{
color: #518dff;
font-size: 16px;
padding-left: 15px;
}
.middle_text {
margin-left: 15px;
margin-top: 5px;
margin-right: 5px;
font-family: Verdana,Arial,Helvetica,Times New Roman;
font-size: 14px;

}

.content_title {
color: #820000;
font-size: 16px;
padding-left: 10px;
}
.right {
margin-top: 0px;
float:right;
width: 195px;
height: 600px;
background-color:#e7e0ce;

}


#copyright {
color: #fff;
width: 790px;
height: 20px;
margin-top: 20px;
background-color: #454545;
font-size: 9px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

/* menu dropdown*/

#menu li {	
margin: 0;
padding: 0;
list-style: none;
float:left;
font: bold 13px Verdana,Arial;

}

#menu li a {	
display: block;
margin: 0;
padding: 4px 7px;
width: 90px;
background: #7d6642;
color: #FFFFFF;
text-align: center;
text-decoration: none;
height: 17px;
}

#menu li a:hover {	
background: #b78e62;
}
#menu li a.activePage 
{ 
   background: #b78e62 !important; 
}  
#menu li a.activeTab
{
	background: #b78e62 !important;
}
#menu div {	
position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #EAEBD8;
border: 1px solid #72592c;
}

#menu div a {	
position: relative;
display: block;
margin: 0;
padding: 2px 5px;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #dbdbdb;
color: #7d6642;
font: bold 11px arial;
width: 90px;
}

#menu div a:hover {	
background: #b78e62;
color: #fff;
}


gr.
Monique
 
Koenie,
De html code ook graag dat we kunnen zien wat er gebeurd.
Mvg
Defietser
 
Hoi,

hier de htmlcode van de contactpagina.

HTML
Code: 
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Website titel</title>
	<link href="CSS/Stylesheet.css" rel="stylesheet" type="text/css" />
	<script src="JS/functions.js" language="JavaScript"></script>
</head>
<body>
<div align="center">
<div id="wrap">
<div id="header">
	header
</div>
<div id="menu">
	<li>
                	<a href="index.html">Home</a>
                </li>
                <li>
                	<a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">Informatie</a>
                	<div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
                        <a href="Take A Way.html">Take A Way</a>
                        <a href="Lunch en Dinner.html">Lunch en Dinner</a>
                        <a href="Groepen.html">Groepen</a>
               		</div>
                </li>
                <li>
                	<a  href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()" >Nieuws</a>
            		<div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
						<a href="Laatste nieuws.html">Nieuwtjes</a>
						<a href="Activteiten.html">Activiteiten</a>
                        <a href="Kranten.html">Kranten</a>
                        
                	</div>
                </li>
                <li>
                	<a href="Foto's.html">Foto's</a>
				</li>
				
				<li>
                	<a href="Links.html">Links</a>
				</li>
                <li>
                	<a href="Vacatures.html">Vacatures</a>
                </li>
                <li>
                	<a class='activePage' href="Contact.html">Contact</a>
                </li>			
</div>

<div class="left">&nbsp;<BR>
	<img src="IMG/champagne-ontvangst.jpg" width="200" height="280"><p>
	<img src="IMG/terras voor.jpg" width="200" height="280"></p>
	</div>
<div class="middle">
<div class="middle_text" align="left">
<div class="content_title"></div>
<h5>titel</h5><p>




	<h5>contactformulier</h5>
	<form id="form1" name="form1" method="post" action="">
	  <table>
        <tr>
          <td width="99"><label for="KlantNaam">Naam:</label></td>
          <td width="290"><label for="KlantNaam"></label>
            <input type="text" name="KlantNaam" id="KlantNaam" /></td>
        </tr>
        <tr>
          <td><label for="Email">Email adres</label></td>
          <td><input type="text" name="Email" id="Email" /></td>
        </tr>
        <tr>
          <td><label for="Vraag">Vraag:</label></td>
          <td><textarea name="Vraag" id="Vraag" cols="45" rows="5"></textarea></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td><input type="submit" name="Wissen" id="Wissen" value="Wissen" /> <input type="submit" name="Verzenden" id="Verzenden" value="Submit" /></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
      </table>
        </form>
	<p><br>
	  </p>
</div>
</div>
<div class="right">&nbsp;<BR>
	<img src="IMG/champagne-ontvangst.jpg" width="200" height="280"><p>
	<img src="IMG/terras voor.jpg" width="200" height="280"></p>
</div>
</div>

<div id="copyright" align="center">
				 Copyright 2009 MenJ Producties
			</div>
</div>
</body>
</html>
 
Koenie,
Het is allemaal wat rommilig gecodeerd.
Uw .rechts bv is 190 px breed en U zet daar een plaatje in van 200px enz...
Het eigenlijke probleem zit hem in de tabel van uw contactformulier nml het tekstvak er zijn teveel cols nml 45 dat maakt de tabel te breedt voor de.middle en daardoor wordt de .rechts onder de .middle geduwd.
De oplossing zorgen dat alle maten kloppen linker en rechter kolom bv 200px breedt de img ook even breed maken dan wat expirimenteren met de breedte van de cols in het tekstvak in het formulier zodat alles klopt.
Mvg
Defietser
 
Hoi defietser,

voor wat betreft de rommelige codering; had ik zelf ook al gezien, omdat het niet lukte om de rechterkolom ernaast te krijgen ben ik bezig geweest met de marges en daarbij vergeten de plaatjes te verkleinen.

Ik zal de tabel in het contactformulier aanpassen.
In ieder geval bedankt voor je meedenken.

gr.
Monique
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan