I would like to get your advices about the design of a header of my webpage.
The general structure of its design is shown below:
Its HTML part:
<div class="header">
<div class="logo1"></div>
<div class="logo2"></div>
</div>
Its CSS part:
.header{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 160px;
border: 1px solid #48ace1;
}
.logo1{
float: left;
width: 655px;
height: 160px;
background: url(images/logo1.png) no-repeat 0px 2px;
}
.logo2{
float: right;
width: 465px;
height: 160px;
background: url(images/logo2.png) no-repeat 0px 2px;
position: relative; /* it is set to relative because inside this layer I have
several elements with absolute position.*/
}
The problem:
When I open this webpage in a computer with a wide screen it opens perfectly, without any problems, but when I open it with a computer with a small-width screen the second logo (.logo2) falls down to the next line as shown in the following figure:
This happens because totaly the width of .logo1 and .logo2 is 655px+465px=1120px. So, once the width of the browser is less then 1200px more or less, the second logo (.logo2) couldn't find place inside the .header and it automatically falls down to the next line.
In such a cases, I want .logo2 to overlap .logo1 if the width of the browser is less then the total width of two logos (.logo1 and .logo2, in my case more or less 1200px). How can I achieve this affect? Note, that I need .logo1 to be justified to the left-hand and .logo2 to be justified to the right-hand.
Thank you.
Why use float? You're halfway to using CSS positioning with that position:absolute;! http://jsfiddle.net/6sFY5/1/
You can use absolute positioning:
http://jsfiddle.net/LuRDk/
.header{
position:relative;
height:84px;
padding:20px;
border:1px solid green;
}
.logo{
position:absolute;
width:80px;
height: 80px;
border:1px solid red;
}
.right{right:20px;}
.left{left:20px;}
<div class="header">
<div class="logo left"></div>
<div class="logo right"></div>
</div>
Try this,
<div class="header">
<div class="logo1"></div>
<div class="logo2"></div>
<div style="clear:both"></div>
</div>
Add a negative margin to logo1, like so:
.logo1
{
float: left;
width: 655px;
margin-right: -655px;
height: 160px;
background: url(images/logo1.png) no-repeat 0px 2px;
}
This will mean the window can get as narrow as possible, and logo2 will never drop down.
Edited, since first try would still make logo 2 drop at width less than 655px.
Edit 2: You can also set a z-index on .logo2 so that it will cover logo1, if that is what you want.
Related
I'm trying to stitch together an image that is divided into several smaller images. I thought if I just floated everything left, they would fall together nicely so long as I declared the divs in the correct order. The full image is 999 pixels wide and 471 pixels tall, so my first attempt was this CSS:
#ImageWrapper{
background-color: #efefef;
width: 999px;
height: 471px;
float:left;
}
#div1{
background-color: #777;
width: 258px;
height: 100px;
float:left;
}
#div2{
background-color: #999;
width: 678px;
height: 37px;
float: left;
}
#div3{
background-color: #bbb;
width: 63px;
height: 471px;
float: left;
}
#div4{
background-color: #ddd;
width: 18px;
height: 18px;
float: left;
}
<div id="ImageWrapper">
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>
</div>
And then I just declare the divs within the wrapper div in that order, and hoped it would end up looking like this: https://imgur.com/a/d92ig. Divs 1-3 work, but div 4 does not. I tried messing around with the position attribute, but that didn't help either. Is there any way I can easily solve this, and have it work out like in my picture? Eventually I will have enough divs to fill the whole wrapper div, I just wanted to test as I went along.
Here is one way to do it:
#div4{
width: 18px;
height: 18px;
float: right;
background-color:#b2f7;
position:absolute;
margin-top:37px;
margin-left:258px;
}
so simply change position:absolute and then using height and width of div 1 and div 2 you can move to a position.
JSFiddle is here
You could add position: relative to #ImageWrapper and then add the following to #div4:
position:absolute;
left: 258px;
top: 37px;
Bear in mind this isn't responsive at all.
I'm having some strange behavior of the percentages.
I have layout which is 1366 pixels wide and I have one div which should be fluid.
Its 200px wide, which means it should be 14.64% wide.
When the layout is tested in 1366 pixels the div looks fine and there are no problems, but when I expand to 1920 the div is not wide enough.
Here is some samples of the code:
HTML:
<header>
<div class="top-bar">
<div class="fill"></div>
<div class="container">
<nav>
</nav>
</div>
</div>
<div class="bottom-bar">
</div>
</header>
And CSS
.container{
width: 1004px;
margin: 0px auto 0px auto;
}
header{
width: 100%;
height: 95px;
}
header div.top-bar{
background: #ffffff;
width: 100%;
height: 50px;
}
header div.fill{
background: #000000;
width: 14.64%;
height: 50px;
float: left;
}
nav{
height: 50px;
float: left;
}
header.main div.bottom-bar{
background: url("header-bottom.png") repeat-x;
width: 100%;
height: 45px;
}
I've coded liquid designs before, but never had problem like this, maybe my math is wrong or the problem is that everything else is hardcoded in pixels and this is liquid?
I'd guess the problem is because container has a pixel size while fill is in percentage. If all you want to achieve with the fill is to put a background color around container, you can do something like this (and remove the fill class css)
.container{
width: 1004px;
margin: 0px auto 0px auto;
background: #ffffff;
}
header div.top-bar{
width: 100%;
height: 50px;
background: #000000;
}
Now if you want to color only left side, and want to fit your 'fill' div nicely, then both container and fill have be either in percentage or in pixels (won't work properly in different screen sizes). There are different workarounds to make your fill work e.g. the following
header div.fill {
background: #000000;
width: 50%; /*make it wide enough*/
height: 50px;
float: left;
z-index: -1; /*put it behind container*/
position: relative;
}
header div.top-bar{
background: #ffffff;
width: 100%;
height: 50px;
z-index: -2; /*put it behind all*/
position: relative;
}
for managment layout use grid system css famework for example
Bootstrap
http://getbootstrap.com/
or
960 grid system
http://960.gs/
after reading similar questions on stackoverflow, nothing seemed to solve this problem. Here it is..
I have an DIV at the top of my page that I use as a menu. Dimensions are 1920px by 50px. And the CSS code for it is:
#top_bar{height:50px; width:1920px; margin:0px auto;
background:url("img/top_bar.png"); left:0px; top:0px; position:relative;}
I then have a content #wrapper DIV under that which is 960px wide and is centered. The CSS code for it is:
#wrapper{width:960px; margin:0px auto; overflow:hidden; left:0px; top:0px;
position:relative;}
When I zoom in on the page, the content #wrapper DIV stays in the correct position (centered), but the #top_bar DIV moves to the right.
The HTML code of the page is:
<body>
<div id="top_bar">
(...menu links, etc)
</div>
<div id="wrapper">
(...page content)
</div>
</body>
I'm in the process of fixing this for a client so any solutions would be greatly appreciated. Thank you in advance :)
It does not shift, it looks like it does only because the width of 1920px extends well past the margins of your screen. The other div is much smaller.
If you want both divs to appear equally aligned you must give them the same widths
To achieve centered positioning you have to do it with dynamic divs.
DEMO HERE
HTML:
<div class="side-pannel" id="left-pannel"></div>
<div id="container">
<div class="two-item-column">
<div class="item1 column-border-middle">1</div>
<div class="item2 column-border-middle">2</div>
</div>
</div>
<div class="side-pannel" id="right-pannel"></div>
CSS:
#container {
position: relative;
width: 88%;
height: 580px;
float: left;
}
.side-pannel {
position: relative;
width: 6%;
height: 580px;
float: left;
}
.two-item-column {
position: relative;
width: 100%;
float: left;
}
.column-border-middle {
border-right: 1px solid black;
}
.item1 {
height: 288px;
background: #ccc;
}
.item2 {
height: 291px;
background: #ccc;
border-top: 1px solid black;
}
If you zoom in on an element whose size is fixed, it's going to get bigger, obviously. Unless it gets wider than the viewport in which case it has no choice but to expand to the right.
This is my first time on this forum and ill try to be clear as possible, i have a problem with creating a small website for my own, specifically with the header. Im trying to create a page which has a wrapper of 1024px center (margin: 0 auto;) and i would like 2 divs, on both sides of this wrapper where i can use another picture as background. My current css looks like this:
body, html
background: url(../images/bg.jpg);
background-repeat: no-repeat;
background-position: top center;
margin: 0;
padding: 0;
}
#wrapper
margin: 0 auto;
width: 1024px;
}
#header {
width: 1024px;
height: 254px;
background-image: url(../images/header2.png);
background-repeat: none;
position: relative;
}
#header_right {
width: 50%;
right: 0;
background-image: url(../images/header_right2.png);
position: absolute;
height: 254px;
}
#header_left {
width: 50%;
left: 0px;
background-image: url(../images/header_left.png);
position: absolute;
background-position: right;
margin-left: -512px;
height: 254px;
}
and my html looks like:
<body>
<div id="header_right"></div><!--End header right!-->
<div id="header_left"></div><!--End header right!-->
<div id="wrapper">
<div id="header"></div><!--End header!-->
<div id="content"></div><!--End Content!-->
</div><!--End wrapper!-->
</body>
What i'm trying to accomplish is to have a header that continues on both left and right (both headers use different backgrounds), in this case it does work on the left, because im using a negative margin, since i use 50% width and exactly the half of the wrapper (-512px), this works, but if i would try to use a negative margin on the right (margin-right: -512px) this will extend the page on the right with an extra 512px, which is not my intention.
I've been googling all day but can't seem to find any answer to my question, also tried to make 3 divs with float: left , but couldnt figure out how to make 1 in the center with a width of 1024px and the rest 100% width, if anyone could help me out that would be really appreciated.
Kind regards
I am not entirely sure how you want it to look like, but I'll give it a shot.
If I'm way off, perhaps you could provide me with a schematic of sorts?
In any case, the example given below does not use your specific code, but it should give you an idea of how it's done.
Result:
The left and right headers are "infinite", in that they always fill the entire page's width.
The middle header covers up the rest. If you've got background images you can use background-position to position them so that they align with the middle header's left and right edges.
Code | JSFiddle example
HTML
<div class='side_wrapper'>
<div class='left_header'></div><div class='right_header'></div>
</div>
<div class='header'></div>
<div class='content'>
Content here
</div>
CSS
.header, .side_wrapper, .left_header, .right_header{
height: 100px;
}
.header, .content{
width: 400px;
margin: 0 auto;
}
.side_wrapper{
width: 100%;
white-space: nowrap;
}
.left_header, .right_header{
width: 50%;
display: inline-block;
}
.left_header{
background-color: blue;
}
.right_header{
background-color: lightblue;
}
.header{
position:absolute;
top: 0;
left: 50%;
margin-left: -200px;
background-color: red;
}
.content{
background-color: green;
text-align: center;
}
You want the two header out of the wrappper and aside of it right?
If im right, try this:
<body>
<div id="header_left"></div><!--End header right!-->
<div id="wrapper">
<div id="header"></div><!--End header!-->
<div id="content"></div><!--End Content!-->
</div><!--End wrapper!-->
<div id="header_right"></div><!--End header right!-->
</body>
and :
display: inline; float: left;
in each element(header-left, header-right, wrappper), and get out of the negative margin
In you divs use float:left; this should mean that within a wrapper as long as there is enough space they will float next to each other for example
css:
#divWrapper
{
width:500px;
float:left;
background-color:red;
}
#divLeft
{
width:250px;
float:left;
background-color:blue;
}
#divRight
{
width:250px;
float:left;
background-color:green;
}
Html
<div id "divWrapper">
<div id = "divLeft">content here</div>
<div id = "divRight">content here</div>
</div><!--this is the end of the wrapper div -->
A really good tool to use for manipulating css is Firebug in Firefox https://getfirebug.com/
if you want a centre div try this:
http://jsfiddle.net/kzfu2/1/
I'm working on a photography website. One of the things we're trying to aim for is a 'film strip' type of display for the images, as opposed to the usual thumbnail or 'tabulated' formation.
It works with tables. No problemo. The only thing that makes me not want to use a table is the fact that I'm not showing data, there's no need for columns and rows.
Another thing that is a slight spanner in the gears is the fact that I'm putting the images as backgrounds of divs. This is for basic 'copy protection', and also so I can overlay items over the photo on hover of the div.
The way I've got it coded at the moment is:
container [
[image]
[image]
[image]
[image]
]
I've drawn a skitch to help out with the visualisation of this..
As soon as the width of the container is met, the image-divs are dropping to the next line.
The CSS for the Divs is as follows:
.gallery_block_image_p {
width: 354px;
height: 532px;
display: inline-block;
margin: 0px;
padding: 0px;
margin-left: 10px;
float: left;
background-repeat: no-repeat;
}
and for the container...
#gallery {
border: 0px solid black;
position: relative;
top: 99px;
/* width: 8000px; */ /* When this is uncommented it works, with a huge amount of space to the right */
height: 532px;
z-index: 99;
}
and last but not least, the HTML used for the image divs...
<div id="gallery_1_0_img" class="gallery_block_image_p" style="background-image: url(gallery_img/ith/adamd_20101021_137.jpg);"></div>
if you remove "float:left;" from the gallery block style and add "white-space:nowrap" to the container then it should work.
Edit: I think something like this is what you're looking for
<div style="width: 800px; overflow-x:auto; white-space: nowrap;">
<div style="width: 300px; height: 100px; background-color: #f00; display: inline-block;"></div>
<div style="width: 300px; height: 100px; background-color: #0f0; display: inline-block;"></div>
<div style="width: 300px; height: 100px; background-color: #00f; display: inline-block;"></div>
<div style="width: 300px; height: 100px; background-color: #ff0; display: inline-block;"></div>
</div>
Try specifying the width of 800 and adding an overflow declaration:
#gallery {
border: 0px solid black;
position: relative;
top: 99px;
width: 800px;
height: 532px;
z-index: 99;
overflow:auto;
}
try using the overflow property for the container. so something like this:
#gallery {
overflow-x: scroll;
overflow-y: hidden;
}
here are some examples http://www.brunildo.org/test/Overflowxy2.html
I think you might need to define the width of your gallery! see fiddle
I have added the view to hold it all, but like you seemed to find there was no way of forcing a line, might be able to do something with positioning.
Alternatively declare the width at the top of the page with the server side logic instead of the javascript on the fiddle
Not tested, but could you use the
white-space:nowrap;
css property to stop the divs from wrapping when you specify the width?
I have done some thing very similar with a site and was challenged by this as the user would be adding / removing divs on his own. My solution for this was to use jQuery to count each item/div within the container and set the width of the container based on items within the container.
jQuery:
$('.gallery-item').each(function(scroll){ n = n+310; });
$('#gallery').css( "width", n);
});
I came up with a bit of a hacky solution, the only downside of which, you need to know the width of the scrolling gallery. I'm sure that's pretty easy to predetermine or calculate. Below is the code and here is an online demo.
Some cheeky jQuery will allow you to calculate it all on the fly if results are dynamic.
<style type="text/css">
#gallery {
border: 0px solid black;
position: relative;
width:500px;
height: 450px;
overflow:scroll;
overflow-y:hidden;
z-index: 99;
}
.gallery_block_image_p {
width: 354px;
height: 400px;
margin: 0 0 0 10px;
padding: 0;
background-repeat: no-repeat;
display:inline-block;
}
#stretch{
width:1850px;
}
</style>
<div id="gallery">
<div id="stretch">
<div id="gallery_1_0_img" class="gallery_block_image_p" style="background-image: url(http://blogs.westword.com/demver/kitten.JPG);"></div>
<div id="gallery_1_0_img" class="gallery_block_image_p" style="background-image: url(http://blogs.westword.com/demver/kitten.JPG);"></div>
<div id="gallery_2_0_img" class="gallery_block_image_p" style="background-image: url(http://blogs.westword.com/demver/kitten.JPG);"></div>
<div id="gallery_3_0_img" class="gallery_block_image_p" style="background-image: url(http://blogs.westword.com/demver/kitten.JPG);"></div>
<div id="gallery_4_0_img" class="gallery_block_image_p" style="background-image: url(http://blogs.westword.com/demver/kitten.JPG);"></div>
</div>
</div>