media-queries

Status
Niet open voor verdere reacties.
J

janyep

Gebruiker
Lid geworden
7 mei 2008
Berichten
261
Hallo,
Het gaat om media-queries voor de volgende pagina:
http://onzeautovakantiesinnoorwegen.nl/TEST/cssplay-co-uk/index.html

Boven een header en onder een footer

Het gaat om de #wrapper met daarbinnen 3 kolommen = #outer1, #outer2, #outer3

Code: 
#header {background:#fff;}
#outer1 {float:left; width:250px;}
#outer2 {margin-right:454px; margin-left:250px;}
#outer3 {float:right; width:454px;}

#outer1, #outer2, #outer3 {padding-bottom:32767px; margin-bottom:-32767px;}

#wrapper {clear:both; overflow:hidden;}

#footer {clear:both;}


Ik probeer te werken met media-queries

Code: 
/* <link rel="stylesheet" media="screen and (min-width: 1025px)" href="css/screen_wide.css" /> */
#header:after {content:"Wide Layout";}
#header {background:[B][COLOR="#FF0000"]FloralWhite[/COLOR][/B];}

Code: 
/* <link rel="stylesheet" media="screen and (min-width: 801px) and (max-width: 1024px)" href="css/screen_medium.css" /> */
#header:after {content: "Medium Layout";}
#header {background:[B][COLOR="#FF0000"]HoneyDew[/COLOR][/B];}

Dit lukt allemaal nog net :P

Maar natuurlijk was dit alleen een simpele test en gaat het niet om de achtergrondkleuren.

De vraag is: hoe krijg ik in de medium.css de #outer1 BUITEN de #wrapper?
#outer1 zou plaats moeten nemen direct na #header met width:100%

Weet iemand raad?
Bedankt, gr janyep
 
Hoi janyep,

Zou je de vraag nog even wat duidelijker op willen stellen aub? Ik snap niet echt wat je nu precies wilt bereiken nmlk.
Toch denk ik dat je met div's moet gaan werken of zo.

Groeten,
Nick
 
Hallo Nick
dank voor je reactie.

als je nog eens wilt kijken op http://onzeautovakantiesinnoorwegen.nl/TEST/cssplay-co-uk/index.html

en als je de beeldschermresolutie verkleint
naar respectievelijk < 1024* breed
en naar < 800* breed (sorry: ook nog 1x opnieuw herladen, die gele scrollbalk hapert)

dan zie je dat één en ander begint te lukken, dus bij deze is mijn vraag van gister zojuist opgelost - door aparte style's te maken voor de div. resoluties
<link rel="stylesheet" media="only screen and (min-width: 801px) and (max-width: 1024px)" href="css/screen_medium.css" />

Code: 
/* css/screen_medium.css */
#header:after {content:"Medium Layout = (min-width: 801px) and (max-width: 1024px";}
#header {background:HoneyDew; border-bottom:1px solid #000;}
#outer1 {[COLOR="#FF0000"]float:none; clear:both; width:100%;[/COLOR] background:#fff; border-right:1px solid #000; height:200px;}
#outer2 {background:#d3d3d3;  margin-right:454px; [COLOR="#FF0000"]margin-left:0px;[/COLOR]}
#outer3 {float:right; width:454px; background:#fff;}

#outer1, #outer2, #outer3 {padding-bottom:32767px; margin-bottom:-32767px;}

#wrapper {clear:both; overflow:hidden; background:#fff;}

#footer {clear:both; background:#455c5a;}

.scrollbar1 .viewport {[COLOR="#FF0000"]height:100px;[/COLOR]}

Echter, in de nieuwe situaties
respectievelijk 2-kolommen
en respectievelijk 1-kolom

dienen de gekleurde scrollbars (weer) in-actief te worden.
Daar ga ik nu op puzzelen, maar suggesties zijn welkom!

Code: 
  <head>
	<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="js/jquery.tinyscrollbar.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$('.scrollbar1').tinyscrollbar();	
		});
		$(document).ready(function(){
			$('.scrollbar2').tinyscrollbar();	
		});
		$(document).ready(function(){
			$('.scrollbar3').tinyscrollbar();	
		});
	</script>
  </head>
 <body>
				
	[COLOR="#FF0000"]<div class="scrollbar1">
		<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
		<div class="viewport">
			 <div class="overview">[/COLOR]
				<h2>Scrollbar1 - height:800px</h3>
				<p>Lorem ipsum dolor enz. enz. *****</p>                   
			</div>
		</div>
	</div><!-- close scrollbar1 -->
 </body>

Nogmaals dank zover,
groeten janyep
 
Laatst bewerkt:
Dus wat je bedoeld: Voor mensen met een grotere resolutie moet de scrollbalk weer verdwijnen? (Als de hele tekst in beeld past) ofzo?

Ten eerste zou ik je eerst even willen wijzen op het koppelen van css aan div's.

Als je alle divs aan een ander css-part koppelt zou ik dat aan een id doen ipv aan een class.
Zie hier een voorbeeld:
http://www.tizag.com/cssT/cssid.php

Misschien een beetje pietje precies, maar dit is de nette manier ;)

Groeten!
 
Hallo Nick
ik mag dat wel hoor: werken als pietje precies.
Maar wat je ziet is beta: uiteindelijk moet er 1 scrollbar-style worden gekozen en die wordt dan 3 keer herhaald, vandaar "class"

En het kwartje is ook gevallen:
de div's bij de scrollbar's een hoogte van 100% meegegeven, dan wordt er niet gescrolld

(dit geldt dus alleen afhankelijk van het beeldschermformaat / als het window wordt geresized )

Mooi hè :cool: Het lijkt de Gamma wel !

http://onzeautovakantiesinnoorwegen.nl/TEST/cssplay-co-uk/index.html

Hartelijk dank voor de suggesties
Zoals je ziet is het nog lang niet af, dus wellicht mag ik nog eens aankloppen?

Vr groet, janyep
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan