Im still having a bit trouble understanding my divs. Im trying to make a website that changes its sizes according to browser/screen size.
Ive gotten this far:
my html:
<div id="wrapper">
<div id="header">Header</div>
<div id="left">Left</div>
<div id="right">Right</div>
<div id="footer">Footer</div>
</div>
my css:
#wrapper{width: 60%;}
#header{width: 100%; padding-top: 11.00%;}
#left{float: left; width: 27.5%; padding-top: 44%;}
#right{float: left; width: 72.5%; padding-top: 44.00%;}
#footer{clear: both; width: 100%; padding-top: 11.40%;}
Now my divs are exactly the right size, the problem is that the conect is always at the bottom of the div but i need it to be like a normal div so i can do anything i want with it.
Whats the easiest way to use it like a normal div?
Thank you for any help! :)
Edit:
Here is what it looks like: http://jsfiddle.net/rswML/
... and as i said the problem is that the text is always at the bottom of the div. I understand its because of padding-top but i need it to keep the hight ratio to width andd still use the div normally.
What you are trying here is a responsive design concept. I advice you to try out bootstrap framework for this. Rather than doing everything by your own, you can get everything done by simply adding a class to your divs.
Responsive web design (RWD) is a web design approach aimed at crafting
sites to provide an optimal viewing experience—easy reading and
navigation with a minimum of resizing, panning, and scrolling—across a
wide range of devices
I think the issue may be with your padding values. Perhaps adjusting them will allow you to have the control you want or maybe a margin-top would be better. Also, not sure if you were hoping to line up the tops of the elements #left and #right but those padding settings may render at different values. The padding-top property with a percentage references the containing block's width. Hope that helps. Cheers.
The solution was that i had to make header divs position: relative and then make another div inside of it that was position: absolute and width/height: 100%.
Related
if you could take a look for a moment at http://www.acehbus.com, you could see that the screenshot image of iPhone is fully seen in the screen. I want to know how to make the half of the image overlays the next div like in the http://sociali.st. I have tried z-index but it doesn't work. Thanks you for your help.
I got through your site, and I have two things:
1) dont use images with resolution of 649x1323. Half of that size will ok .. there are many of images of this phone, and people with slower connection will die on this. And it is still used only as smaller thumbs, so large resolutions are really not necessary.
2) You use the image as itself. Use div instead and give image as its background. See this fiddle:
https://jsfiddle.net/8xhucpx8/
div.image{
width:300px;
height:200px;
background-image:url('http://www.acehbus.com/img/search.png');
background-position:top center;
background-size:100% auto;
background-repeat:no-repeat;}
You can do that using overflow: hidden first give a fixed height to the parent element of the image in your case col-md-6. So do something like.
.col-md-6 {
height: 155px;
overflow: hidden;
}
<div class="col-md-6">
<img src="http://www.acehbus.com/img/search.png" alt="" width="200px" />
</div>
First of all, you may always inspect a site with effect you want to achieve and try to apply it's approach in your project. The markup and styles are at direct access. If you noticed in the example you've provided the overlapping effect is achieved with combination of negative margins and absolute positioning. So if you play with these properties you gonna make it. I would go for something like this:
<div class="iphone"></div>
.iphone {
bottom: -100px;
position: relative;
}
Look, I made some experiments and made this fiddle
I have a responsive image grid background in my website.
All its working fine with perfectly square images but when one image is for example 1px height bigger, the grid breaks.
Example OK:
[H][H][H][H][H][H]
[H][H][H][H][H][H]
[H][H][H][H][H][H]
Example FAIL
[H][H][H][H][H][H]
[H][H][H][A][H][H]
[H][H]
[H][H][H][H][H][H]
I dont want to use mansory o other plugins, this is my code:
HTML
<div class="resp pull-left">
<img class="img-responsive indexUser" src="image.jpg">
</div>
CSS
.resp{
width:10%;
height:10%;
}
.resp img{
width:100%;
}
Im using Bootstrap 3. Is it possible to do it?
EDIT WITH MORE INFORMATION
I want to put only square pictures in order, sorry, without grid. The image containers are floating. This is the screenshot with the problem:
Is responsive and I need to use % in with to adjust perfectly fullscreen allways
There are two things you can try here that might answer your question. Of course, without seeing your code it's very hard to advise in a more in-depth fashion.
If you're using Boostratp, why not wrap each row of images in a row-fluid container and use it's grid system? This will at least ensure that you don't get the dirty float bug, although it also means that you'll get a little extra space underneath the child elements of that one taller one.
Or, set the parent anchor's height and set overflow: hidden. This will essentially cut off the bottom edge of the taller image, although you would have to work through your break points.
As a code example of point two above:
.resp a{
display: block;
max-height: 300px;
overflow: hidden;
}
Bear in mind that images in Bootstrap have max-width: 100% set to them automatically so they will always flow to the width of the container if wide enough.
You will probably need to provide a height and maybe even set overflow:hidden. Please provide more markup if you want a better answer.
This is one linked image in a div, not a grid:
<div class="resp pull-left">
<img class="img-responsive indexUser" src="image.jpg">
</div>
<figure><img src="images/edu.jpg"></figure>
figure img {
width: 100%;
}
I've got a question about optimizing webpages... hmm, let me start over from the beginning.
HTML Code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<title></title>
</head>
<body>
<div id="header"> Text... </div>
<div id="body"> </div>
</body>
</html>
CSS Code:
#header
{
background-color: green;
width: 50%;
height: 25%;
left: 25%;
position: absolute;
}
#body
{
background-color: red;
width: 50%;
height: 55%;
left: 25%;
top: 25%;
position: absolute;
}
The problem is that whenever I minimize the window a bit, my divs shrinks together. That's not how I want it to appear. After figuring out a while how to solve this problem I came up with this "great" idea to make a div wrap that cover all the other divs.
So then my divs need a wrap right?
<div id="wrap">
<div id="header"> </div>
<div id="body"> </div>
</div>
#wrap {
width: 600px;
height: 800px;
position: absolute;
}
Now in my css code I need to set the px of height and width of the wrap div, right? Now this will work but the problem is. How do I get to optimize this then on another computer screen? I mean this wouldn't work on all the users right?
Anyway.. Let me repeat the question once again...
How do I my webpages to optimize to minimizing windows in the browsers and to work on all screens? I mean everything has to relate to pixels right? Now how the ** is that suppose to work If all the screen has different size's? I mean then you need to use the % to make it work. I don't want you guys to mainly sort of this exactly problem but give me some advice how to generally optimize a webpage in the best way.
Ok here is what I usally do:
Whenever I want to create a website that doesn't fill 100% of the page I create a wrapper around ALL the content, like you did. You can either do this with fixed values or with % values. In case you want to use % values it's often smart to use min-width or max-width for your wrapper. This way you only need to define fixed values once and all the inner content can be defined by using %. This helps especially if you want to resize the whole content later on, if your realize that it might look better with a little bit more width.
Height values rarely use % values, only use % values for the height if you are using a fixed height for your container. If you want to create different layouts for different screen resolutions you can always have a look at the #media tag which allows you to create resolution specific css code. This however is only recommended for a small set of resolutions, let's say, 2 different resolutions for desktop computer and maybe 2 different resolutions for mobile phones (4 different css definitions).
I usually try to use min-width and max-width with % values, and if that isn't possible for example for popup windows or fixed elements like a sidebar I use px values. And if I for example want to support multiple columns for my content if the user has larger screens I make use of #media
I also don't get why you're using absolute positioning. If you just want to center content use margin: 0 auto; on your container. Btw in html5 you can also use the <header> tag if you want to specify a header. Using a div and giving it a class/id isn't wrong but I think you should know that there is some new stuff out there in the world of html5/css3
EIDT:
Your title is a little bit confusing, since your question is totally different. For website optimization I strongly recommend http://developer.yahoo.com/performance/rules.html or for advanced optimization you can use https://developers.google.com/closure/ and https://code.google.com/p/closure-stylesheets/
Four your above code:
you can use:
#wrap {
margin:0 auto;
width: 600px;
height: 800px;
position: absolute;
}
instead of
#wrap {
width: 600px;
height: 800px;
position: absolute;
}
And to make make your webpage look same when window is re-size or you have to learn abut Responsive Web Development. Start using media queries in you pages.
For responsive design use media queries: Here is good example of media queries . Also learn how to use it.
I'm currently creating a website and I came across a strange thing: I have a content div that's 950 width and centered on the page. Inside that I have a header div, a menu div and some other content div. I would like the menu div and that other content div to be right next to each other so I thought about using float:left on both divs. However, when I use this float:left on the menu div, it's getting pushed to the right and I can't figure out why. I think some other element is pushing it to the right.
I'm using a custom Drupal theme, a subtheme of Zen to create the page by the way.
Here's the HTML I'm using to create the page (without the header):
<div id="root">
<div class="content">
<div class="left-menu">
<ul>
<li><p>Camera</p></li>
<li><p>Audio</p></li>
<li><p>Licht</p></li>
<li><p>Lenzen</p></li>
<li><p>Grip</p></li>
<li><p>Accessoires</p></li>
<li><p>Recorders</p></li>
<li><p>Transport</p></li>
<li><p>Edit suits</p></li>
<li><p>Crew</p></li>
</ul>
</div>
<div class="products-overview">
This is some other content that I want to the right of the menu.
</div>
</div>
And here are some CSS properties I've set on left-menu and products-overview:
.left-menu {
margin-top: 10px;
background-color: #BBB;
width: 150px;
float: left;
}
.products-overview {
background-color: #BBB;
float: left;
}
Could anyone please explain me why the left-menu is being pushed to the right?
Hmm, I believe this is a result of the normalize.css stylesheet you're using.
The problem stems actually from the .header element, which has a table within it. The normalizing stylesheet has a margin-bottom:1.5em applied to the table, which translates into a margin on the .header element (since it has no padding/border), which in turn sends the .left-menu to the right (since the margin causes there to be no space for it to fit on the left).
Adding to your current .header table definition can fix this, with a simple:
.header table{
margin-bottom: 0;
}
I hope this is what you were looking for! If not, let me know and I'll be happy to help further. Good luck!
I tried to replicate your problem. I did and found a solution that should work. Just set the products-overview class to float:none. See this fiddle. http://jsfiddle.net/shaansingh/yj4Uc/
In Mozilla Firefox it looks ok to me. From your code, I can only see that you need a width for the content div. and watch the dimensions, especially left/right padding and borders.
I have a header image for a layout that I'm working on that is 1200px wide. The layout is fixed.
I'd like the container that wraps this image (and any container that wraps it up in the DOM hierarchy) to adapt to the 1200px. First thing I thought on doing was to just:
.container {
width:1200px;
}
It works, but then what's the point of using bootstrap? And also, I'd probably be messing with the grid by forcing a width this way, right?
So, I tried to setup the grid to add up to 1200px, but still keep 12 columns, like this (I'm using sass):
$grid-column-width: 70px;
$grid-gutter-width: 32px;
However, I could only approximate (or go way above) 1200px, while keeping 12 columns. In this case, I got 1192px, which works, but is not optimal.
Here's the markup I'm using:
<div class="container">
<div class="row-fluid">
<div class="header-photo text-center span12"></div>
<div class="row-fluid">
...
</div>
...
</div>
</div>
And here's the SCSS that setups the header div:
div.header-photo {
background-image: url(/images/header-photo.png);
width: 1200px;
height: 368px;
h2,h3 {
text-indent: -99999px;
}
}
So, if I use span12, the other divs adapt to the size of the header-photo div, but only up to 1192px.
What would be the best approach to get the container to be of exactly 1200px?
force it with a CSS rule (like I tried doing) ?
A combo of the grid conf that I'm clueless about?
Tell the designer to make the header photo smaller/bigger so it adapts to another value?
... ?
Any hints highly appreciated!
Thanks in advance!
you should fix the container value by opening the bootsrap gem