PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact

wegvallen cq overlap section en menu

Door marina janssen op 08-06-2016 22:59 gewijzigd op 09-06-2016 00:30
1.417 views
Hallo, ik ben al dagen aan het prutsen maar het lukt me niet om het menu boven de section te krijgen zonder dat er een deel wegvalt of overlapt.

Hoe kan ik nou ervoor zorgen dat mijn menu en section gecentreerd en netjes boven elkaar staan en nog steeds zichtbaar/clickable zijn bij resizen?

dit is mn html

 <html><body>

	<label for="show-menu" class="show-menu">Toon Menu ￬</label>
	<input type="checkbox" id="show-menu" role="button">
		<ul id="menu">
		
		<li>
			<a href="#">Zoek ￬</a>
			<ul class="hidden">
				<li><a href="#">Eenvoudig</a></li> 
				<li><a href="#">Meervoudig</a></li>
			</ul>
		</li>
		<li><a href="#">Help</a></li>
				
		<li><a href="#">Info</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
	
	<section>
<h3>Eenvoudig zoeken</h3>
<table>

<tr>
<td><form action="recent.php" method="post" title="laatst binnengekomen katten" />
</td>
<td><input type="submit" value="Recent binnengekomen" /></td>
</form>
</tr>

<tr><td>Of vul 1! veld in.</td></tr>




<tr><form action="nummer.php" method="post" /><td>Nummer:</td> 
<td><input type="text" name="Nummer_id" maxlength="5"/> </td>
<td><input type="submit" value="Zoek" /></td>
<td> <input type="reset" value="Reset" /></td></form>
</tr>

<tr>
<form action="naam.php" method="post" /><td>Naam:</td>
<td><input type="text" name="Naam" maxlength="15"/></td> 
<td><input type="submit" value="Zoek" />
<td> <input type="reset" value="Reset" /></td>	
</td>
</form></tr>

<tr>
<form action="datum.php" method="get" /><td>Vanaf: </td>
<td><input type="text" name="dag" size="2" maxlength="2" title="dag">-<input type="text" name="maand" size="2" maxlength="2" title="maand">-<input type="text" name="jaar" size=4 maxlength="4" title="jaar">
<td><input type="submit" value="Zoek" /></td>
<td> <input type="reset" value="Reset" /></td>	
</form></tr>

<tr>
<form action="kleurcodes.php" method="get" /><td>Kleur(en): </td> 
<td><input type="checkbox" name="Code[]" value="2"/>wit &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<input type="checkbox" name="Code[]" value="4"/>beige <br> 
	<input type="checkbox" name="Code[]" value="8"/>rood &nbsp;&nbsp;&nbsp;
	<input type="checkbox" name="Code[]" value="16"/>bruin <br>
	<input type="checkbox" name="Code[]" value="32"/>cypers&nbsp;
	<input type="checkbox" name="Code[]" value="1"/>grijs <br>
	<input type="checkbox" name="Code[]" value="64"/>zwart<br>
</td> 
<td><input type="submit" value="Zoek" /></td>
</form></tr>

<tr>
<form action="vacht.php" method="get" /><td>Vacht:</td>
<td><select name="Vacht">
<option value="cypers">cypers</option>
<option value="lapje">lapje</option>
<option value="schildpad">schildpad</option>
</select></td>
<td><input type="submit" value="Zoek" /></td>
</form>
</tr>

<tr>
<form action="ras.php" method="post" /><td>Ras: </td> 
<td><select name="Ras">
<option value="balinees">Balinees</option>
	
<option value="Brits korthaar">Brits korthaar</option>
<option value="halflangharig">halflangharig</option>
<option value="langharig">langharig</option>
<option value="ras">ras overig</option>
<option value="siamees">siamees</option>
<option value="Turks korthaar">Turks korthaar</option>
</select>
</td>
<td>
<input type="submit" value="Zoek" /></td>
</form></tr>

<tr>
<form action="bijzonderheden.php" method="post" /><td>Bijz.heden: </td>
<td><select name="Bijzonderheden">
<option value="blauwe ogen">blauwe ogen</option>
<option value="een oog blind">blind</option>
<option value="hazelip">hazelip</option>
<option value="mist oog"> mist oog</option>
<option value="mist staart">mist staart</option>
<option value="mist voorpoot">mist poot</option>
<option value="mist stuk oor">mist stuk oor</option>
<option value="oddeye">odd-eye</option>
<option value="vaal">vaal</option>
</select>
</td>
<td><input type="submit" value="Zoek" /></td>
</form></tr>




</table>
<br><br>
</section>
</body>
</html>


en dit mn css

body { 
	background: #E8E8E8;
    font-family: Verdana, Arial, helvetica, sans-serif;
     font-size: 90%;
     color: black;
   
	} 

/*Strip the ul of padding and list styling*/
ul {
	list-style-type:none;
	margin-top: -25%;
	
	padding:0;
	position: absolute;
	}

/*Create a horizontal list with spacing*/
li {
	display:inline-block;
	float: left;
	margin-right: 1px;
	
	}

/*Style for menu links*/
li a {
	
	display:block;
	min-width:140px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #fff;
	background: #828282;
	text-decoration: none;
	border-radius: 1em;
	
	}

/*Hover state for top level links*/
li:hover a {
	background: #be8b0b;
	}

/*Style for dropdown links*/
li:hover ul a {
	background: #f3f3f3;
	color: #828282;
	height: 40px;
	line-height: 40px;
	}

/*Hover state for dropdown links*/
li:hover ul a:hover {
	background: #dec685;
	color: #fff;
	}

/*Hide dropdown links until they are needed*/
li ul {
	display: none;
	}

/*Make dropdown links vertical*/
li ul li {
	display: block;
	float: none;
	}

/*Prevent text wrapping*/
li ul li a {
	width: auto;
	min-width: 100px;
	padding: 0 20px;
	}

/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
	display: block;
	}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-decoration: none;
	color: #fff;
	background: #828282;
	text-align: center;
	padding: 10px 0;
	display: none;
	}

/*Hide checkbox
input[type=checkbox]{
    display: none;
}
*/

#show-menu {
	display: none;
	}
	
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked + #menu{
    display: block;
	}


/*Responsive Styles*/

@media screen and (max-width : 760px){
	/*Make dropdown links appear inline*/
	ul {
		position: static;
		display: none;
		
	}
	/*Create vertical spacing*/
	li {
		margin-bottom: 1px;
	}
	/*Make all menu links full width*/
	ul li, li a {
		width: 100%;
	}
	/*Display 'show menu' link*/
	.show-menu {
		display:block;
	}
}

section {
        background: #F0F0F0;
		color: black;
        border-radius: 1em;
        padding: 1em;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%) 
      }

table {
    border-collapse: collapse;
    font-size: 90%;
    	
}
Ariën
08-06-2016 23:07
Kan je de code proberen te beperken door relevante code te tonen, en deze tussen code-tags te plaatsen?
Alvast bedankt!
Thomas van den Heuvel
09-06-2016 14:44
CSS is niet mijn sterkste punt, but here goes.

Op het moment dat je position: absolute toepast op een (HTML) element haal je deze uit de normale "flow" van het document: deze gaat een eigen leven leiden en trekt zich niets meer aan van andere elementen, zo ook hier.

Op mijn laptop (1366x768) zie ik initieel het menu niet eens - deze valt van mijn scherm af. Ik denk dat je als algemene rule of thumb wel zou kunnen stellen (correct me if I'm wrong) dat het niet verstandig is om met negatieve waarden te werken tenzij je echt niet anders kan.

Dan de section. Ik denk dat het stukken makkelijker is om deze enkel horizontaal te centreren. Dit kan eenvoudig met margin: 0 auto;. Dit vereist wel dat je de section een vaste breedte geeft, maar gezien de formulier(en) zelf niet echt responsive zijn en je op een gegeven moment toch aannames moet gaan doen over de afmetingen van zaken is een breedte van 400px een redelijke keuze. Wel zul je na moeten denken hoe je zaken gaat tacklen als het (de) formulier(en) op mobiele telefoons wilt tonen.

Dan het menu, wat je zou kunnen doen is een div met clear: both; tussen het menu en je section zetten zodat deze initieel niet overlapt.

Ik denk dat je alles bij elkaar je iets teveel hebt beroept op kunstgrepen waardoor je uiteindelijk in de modder vast bent komen te staan. Wanneer je met design bezig bent is het misschien verstandig om dingen zo simpel mogelijk aan te pakken. Wanneer je allerlei moeilijke truuks uit moet gaan halen om het design in het gewenste formaat te wurmen is dat een indicatie dat je iets zou moeten aanpassen in de layout of de opmaak, zo ook hier.
marina janssen
11-06-2016 01:54
Nou tis eindelijk gelukt, alleen niet met dat mooie dropdown menu want dat kreeg ik gewoon niet in het midden zonder dat er op andere plaatsen iets compleet uit het lood hing. Dus ik heb maar eenvoudig menutje van w3schools gebruikt. Een schooonheidprijs zal ik er niet mee winnen maar het werkt prima en alles blijft binnenboord. Ik ben blij, dank!

Reageren

Inloggen om te reageren