hey experts, i've got a very simple css question. <style type="text/css" media="screen"> .float1 { float: left; width: 240px; } .float2 { float: left; width: 240px; } .float3 { float: left; width: 12px; margin-bottom: 1em; } </style> <div class="float1"> text menüpunkte, etc. </div> <div class="float2"> <img src="bild.jpg" border="0" alt="" width="268" height="177" /> </div> this is what I have put together. my goal is, to have floatign elements so the design can be responsive to the screen size. following issues with that: its working, but if the screen is big enough, the thext that comes unter those elements continues on the right side. i want it to continue UNTER it. also, the text is sitting a bit lower than the picture. please advice. thanks!
one more... plz: do i have to use that selector thing, in order to use more than one elements? .selector1 { width:400px; height:200px; }
I'd have more questions than answers -- but those questions in many ways ARE the answers. If it's supposed to be a responsive layout, why are you floating EVERYTHING? If it's supposed to be a responsive layout, are you declaring fixed widths on everything? If it's supposed to be a responsive layout, why are you declaring widths on all your columns in px? Why do you have an IMG tag that's wider than the DIV it's in? If all that's going into that DIV is a IMG, why does it need a DIV? Basically, I can't figure out what you want for appearance or what responsive layout has to do with the code you presented; in many ways it's the antithesis of it, but I can't weigh in more unless I see actual content and/or what you're trying to do; all I can say for certain is that from what I'm seeing, you're designing '90's style. A good responsive layout should be elastic (EM instead of PX on things like columns and fonts) and fluid / semi-fluid (at least one column auto-sizing to fill available space) before you even think about adding your media queries for responsiveness. It's why fixed widths, PARTICULARLY in pixel measurements are steaming piles of **** that have no business on websites in the first place; no matter what the lazy sleazeball **** with their heads up 1997's rump or ignorant PSD jockeys who don't know enough about the web to be designing jack **** say about it.
Firstly you need to understand what responsive web design (RWD) actually is: http://en.wikipedia.org/wiki/Responsive_web_design After you have had a read of that let's look at how to implement that using media queries within your style sheet. See the code below which I have written. <!DOCTYPE html> <head> <style type="text/css" media="screen"> .clear{ clear:both; } #container{ width:998px; margin:0 auto; } #container .block{ width:23%; float:left; margin:10px 1%; } #container .block.panel1{color:red;} #container .block.panel2{color:green;} #container .block.panel3{color:orange;} #container .block.panel4{color:purple;} @media (max-width: 998px ) { #container{ width:100%; } #container .block{ width:48%; } } @media (max-width: 500px) { #container .block{ width:100%; float:none; } } </style> </head> <body> <div id="container"> <div class="block panel1"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div><!-- /.block --> <div class="block panel2"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div><!-- /.block --> <div class="block panel3"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div><!-- /.block --> <div class="block panel4"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div><!-- /.block --> </div> </body> </html> Code (markup): The way we make this layout "responsive" is by manipulating the widths and floats as per each screen size by using the media queries. Hopefully this will be enough for you to get started.