Borders onder elkaar plaatsen

Status
Niet open voor verdere reacties.

Martijn31

Gebruiker
Lid geworden
6 sep 2009
Berichten
362
Hallo Helpmij,

Ik ben bezig met een weergave voor zowel de mobiel als een normaal beeldscherm.
Bij de mobiele weergave worden de borders netjes onder elkaar geplaatst, maar de normale weergave worden de borders naast elkaar geplaatst.

hier een precies voorbeeld van wat er gebeurd:
voorbeeld.png

Nu vraag ik me af hoe ik de borders onder elkaar uitgelijnt krijg, zodat ik ze breder kan maken
hier de css

Code:
/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  KOLOMMEN OPSTARTEN  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPEREN  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  OPBOUW VAN 4 RESPONSIVE KOLOMMEN  */
.span_4_of_4 {
  width: 100%; 
   
}
.span_3_of_4 {
	width: 74.6%;
}
.span_2_of_4 {
	width: 49.2%;
}
.span_1_of_4 {
	width: 23.8%;
}

body {
        background-color:#BDBDBD;   list-style-image: url("../afbeeldingen/webopmaak/blauwblokje.png"); 
} 

A:link { text-decoration: none; color: #000000 }
A:visited { text-decoration: none; color: #990000 }
A:hover { text-decoration: none; color: #800040 }
A:active { text-decoration: none; color: #cc00FF }	

div#afbeelding, #afbeelding1, #afbeelding2, #afbeelding3 {
background: #E0ECF8; url(../_img/para.jpg) no-repeat 0 0;
border-radius: 10px; float: left;
padding: 15px;
height: auto;
width: 185px;
border: 3px solid #A9D0F5;
} 

#wrapper {
    margin: 0 auto;
    width: 1100px;}

#headerwrap {
     width: 1100px;
    float: inherit;
    margin: 0 auto;}

#header {
    height: 75px;
    background: #FFFFFF;
    border-radius: 20px;
    border: 5px solid #ebebeb;
    margin: 5px; }
	

#welkomsblokwrap {
     width: 1100px;
    float: left;
    margin: 0 auto;}
	

#welkomsblok {
    height: auto; 
    background: #FFFFFF;
    border-radius: 10px;
    border: 1px solid #FFFFFF;
    margin: 1px;  line-height: 20px; padding: 17px; }



#navigatiewrap {
    width: 1000px;
    float: left;
    margin: 0 auto;
 padding: 10px; overflow: hidden;}

#navigatie {
    height: 30px;
    background: #000000;
    border-radius: 10px;
    border: 5px solid #000000;
    margin: 5px; color: white;}

#eersteblok {
    height: 1000px; 
    background: #FFFFFF;
    border-radius: 10px;
    border: 1px solid #FFFFFF;
    margin: 1px;  line-height: 20px; padding: 17px; }
	
#tweedeblok {
    height: 1000px;
    background: #FFFFFF;
    border-radius: 10px;
    border: 1px solid #FFFFFF;
    margin: 1px;  line-height: 20px; padding: 17px; }

#derdeblok {
    height: 1000px; 
    background: #FFFFFF;
    border-radius: 10px;
    border: 1px solid #FFFFFF;
    margin: 1px;  line-height: 20px; padding: 17px; }
	
	
#vierdeblok {
    height: 1000px;
    background: #FFFFFF;
    border-radius: 10px;
    border: 1px solid #FFFFFF;
    margin: 1px;  line-height: 20px; padding: 17px; }
	
	#footerwrap {
    width: 100%;
   float: left;
    margin: 0 auto;}

#footer {
   height: auto; 
    background: #000000;
    border: 5px solid #81BEF7;
    margin: 5px; color: white; padding: 5px; }


	
	
	
	
	/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 1020px) {
	.col {  margin: 1% 0 1% 0%; }
	.span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4  { width: 100%; } 

A:link { text-decoration: none; color: #000000 }
A:visited { text-decoration: none; color: #990000 }
A:active { text-decoration: none; color: #cc00FF }

div#afbeelding, #afbeelding1, #afbeelding2, #afbeelding3 {
background: #E0ECF8; url(../_img/para.jpg) no-repeat 0 0;
border-radius: 10px; font-size: 180%; line-height: 50px;
padding: 4%;
height: auto;
width: 90%;
border: 5px solid #A9D0F5;} 

   select {
        width: 500px;
		height: 130px;
		font-size: 200%;
        float : right;}
		
	#rssOutput {
	font-size: 140%;}

	#welkomsblokwrap {
     width: 1100px;
    float: left;
    margin: 0 auto;}
	

#welkomsblok {
 background: #FFFFFF;
	height: auto;  
	min-height: 160px;
    border-radius: 25px;
    border: 1px solid #FFFFFF; padding: auto;  line-height: 30px; 
    margin: 2%; font-size: 120%;  list-style-image: url("../afbeeldingen/webopmaak/blauwblokje1.png");  }


#header {
    height: auto;
    background: #FFFFFF;
    border-radius: 20px; text-align: left;
    border: 1px solid #FFFFFF;
    margin: 30px; font-size: 100%; padding: 1%;}
	
#navigatie {
	height: 40px; 
    background: #000000; font-size: 100%; 
    border: 5px solid #000000;
    margin: 30px; color: white; padding: 1%; }
	
#eersteblok {
    background: #FFFFFF;
	height: auto;
    border-radius: 25px;
    border: 1px solid #FFFFFF; padding: auto;  line-height: 30px; 
    margin: 2%; font-size: 160%;  list-style-image: url("../afbeeldingen/webopmaak/blauwblokje1.png");  }
	
	
#tweedeblok {
    background: #FFFFFF;
	height: auto;
    border-radius: 25px;
    border: 1px solid #FFFFFF; padding: auto;  line-height: 30px; 
    margin: 2%; font-size: 160%;  list-style-image: url("../afbeeldingen/webopmaak/blauwblokje1.png");  }


#derdeblok {
   background: #FFFFFF;
	height: auto;
    border-radius: 25px;
    border: 1px solid #FFFFFF; padding: auto;  line-height: 30px; 
    margin: 2%; font-size: 160%;  list-style-image: url("../afbeeldingen/webopmaak/blauwblokje1.png");  }
	
	
#vierdeblok {
   background: #FFFFFF;
	height: auto;
    border-radius: 25px;
    border: 1px solid #FFFFFF; padding: auto;  line-height: 30px; 
    margin: 2%; font-size: 160%;  list-style-image: url("../afbeeldingen/webopmaak/blauwblokje1.png");  }
	
#footer { 
	height: auto; 
    background: #000000; font-size: 80%; 
    border: 10px solid #81BEF7;
    margin: 5px; color: white; padding: 1%; }

Weet iemand de juiste oplossing? het is niet de bedoeling dat er iets veranderd aan de mobiele weergave. Alvast bedankt.
 
Laatst bewerkt:
Je geeft geen html en veel te veel css. Daar komen we niet uit :d Daarom in de bijlage een voorbeeld zoals het in Bootstrap wordt gedaan. De kolommen mogen ongelijk van lengte zijn, dat maakt niet uit. De layout blijft in dat geval toch netjes.

Suc6. Have fun.
 

Bijlagen

  • mobile-first.zip
    1,1 KB · Weergaven: 42
Je geeft geen html en veel te veel css. Daar komen we niet uit :d Daarom in de bijlage een voorbeeld zoals het in Bootstrap wordt gedaan. De kolommen mogen ongelijk van lengte zijn, dat maakt niet uit. De layout blijft in dat geval toch netjes.

Suc6. Have fun.

bedankt voor je reactie! alleen vroeg ik me alleen af welke manieren er voor zijn. ik dacht dat ik daar geen html voor nodig was. de css had ik erbij gedaan als voorbeeld. ik heb nu alles de positie absoluut mee gegeven en een z index ingesteld voor de borders die voorop moeten blijven. alleen is er een betere manier waardoor ik de borders niet "vast zet"?


alvast bedankt!
 
ik heb nu alles de positie absoluut mee gegeven en een z index ingesteld voor de borders die voorop moeten blijven
Dit wordt zo niet meer gedaan tenzij het niet anders kan. Alle elementen met absolute en z-index een plek geven stamt nog uit de tijd dat er geen smartphones waren en iedereen een lage resolutie scherm had. In mijn bijlage zie je dit dan ook nergens staan. Tegenwoordig wordt er gewerkt met percentage in de breedte, pixels in de hoogte, en voor smartphones en tablets met @media.
 
Bedankt voor je reactie!

hoe regelen we de kolommen die op de voorgrond moeten blijven, als we geen z index meer gebruiken?
Ik zie het inderdaad nergens terug in jou voorbeeld, maar ook de absoluut positie inderdaad niet.
ik snap het stukje dat we met percentages werken. In elk geval kan ik al heel wat met jou advies.

Kun je me nog even uitleggen wat de vervanger van de: z index dan moet zijn? dan wil ik alles even aanpassen naar de tijd van nu.

Bedankt!
Martijn

Edit: ik heb je voorbeeld even getest op mijn webserver en het is precies wat ik bedoel
de kolommen staan hier niet vast in tegenstelling tot de absoluut positie?
 
Laatst bewerkt:
Alles overal in de layout op de voor- en achtergrond zetten wordt niet meer gedaan. Natuurlijk zijn er uitzonderingen zoals een (sub)menu of een tekst op een foto. Z-index is een officiële eigenschap en mag gewoon gebruikt worden, er is geen vervanger voor. Omdat we tegenwoordig rekening moeten houden met allerlei schermresoluties is z-index en absoluut positioneren de meest onhandige manier.
Je vroeg hoe je toch elementen op elkaar kan leggen.
Code:
<div style="position:relative;">
   Blok 1
   <p style="position:absolute; top:20px; left:12%; color:#f00;">
   Dit ligt op blok 1
   </p>
</div>
Het "ouder" element moet relative zijn en het element zelf absolute. Z-index gebruik je niet.
 
Als ik het zo lees kan ik helemaal opnieuw beginnen... Dan wil ik als basis jou voorbeeld gebruiken als dat mag.

dan heb ik nog een laatste vraag
Hoe kan ik het makkelijkst meer rijen toevoegen zoals een menu? of een footer in de css in jou voorbeeld?
het is voor mij even wennen denk ik..

Edit: ik heb alle code verwijderd en ben opnieuw begonnen. het ziet er als volgt uit. is dit ook wat je bedoelt?

HTML:
<html>
<head><title>titel</title></head><body>
<div id="wrapper">
       <div id="header">Hier moet het logo komen
</div></div>

	<div id="footerwrap">
	<div id="footer"><center><strong><br> footer tekst &copy;<br><br></center></strong>
</div></div>
</body>
</html>

en css
Code:
#wrapper {
    position: relative;
    margin: 0 auto;
    width: 1100px;}
	

#header {
    position: absolute;
	width: 100%;
    height: 75px;
    background: #FFFFFF;
    border-radius: 20px;
    border: 5px solid #ebebeb;
    margin: 5px; }
	

#footerwrap {

    position: relative;
    margin: 0 auto;
    width: 1100px;}
	

#footer {
    position: absolute;
	top: 200px;
    height: auto;
    width: 100%;	
    background: #000000;
    border: 5px solid #81BEF7;
    margin: 5px; color: white; padding: 5px; }

of is het toepassen van percentages alleen nodig in mediascreen?
 
Laatst bewerkt:
Als je de Bootstrap stylesheet in de <head> zet dan wordt het nog makkelijker. Zie de bijlage voor een voorbeeldje.
Alles wat boven <body> staat moet je zo laten staan. Kijk wat er gebeurt als je de browser smaller maakt.
Het is slim om je eerst in het "Bootstrap grid" te verdiepen. Daar zijn diverse websites over met genoeg voorbeelden. Het gaat om "col-xx-yy".
In style.css zie je hoe weinig css je zelf hoeft te maken om een indeling te krijgen voor smartphone, tablet, laptop en monitor.
 

Bijlagen

  • bootstrap-voorb.zip
    1,3 KB · Weergaven: 22
Hallo Bron,

De code had ik even snel in elkaar gezet en daarmee ben ik inderdaad de bootstrap vergeten.
Jou informatie heeft mij voldoende geholpen. Het werken met grid is voor mij inderdaad nieuw maar al doende leert men.
Bedankt!
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan