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.
Related
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/
This is my admin panel and I want to divide it into 2 columns with divs. The left div is a menu and has this style set:
#menu_left{
position: fixed;
float: left;
width: 300px;
height: 100%;
top: 0;
left: 0;
background: #666;
color: white;
}
The right one is the content and has this style:
#content{
text-wrap: unrestricted;
float:left;
width: 100%;
left: 300px;
}
It doesn't work as it should work, I want it to wrap the text, but it doesn't.
Tell me also please, if there is any faulty style setting.
Oh the html:
<body>
<div id="menu_left">
<h1>Menu</h1> <hr />
</div>
<div id="content"></div>
</body>
You have width 100% on content, which makes it stick out 300px to the right of the window, because of the width of #menu_left. You should make this some pixel value, or change #menu_left to a % width, say 20%, then content could be 80% and they would fit nicely.
Plus you should remove left: 300px; from #content, it will already go where you want it to because of the float: left;.
Just clear out these lines and you should be good to go.
#menu_left{
position: fixed; <--don't need
float: left;
width: 300px;
height: 100%;
top: 0; <--don't need
left: 0; <--don't need
background: #666;
color: white;
}
#content{
text-wrap: unrestricted; <--don't need (you really want to break letters in the same word?)
float:left;
width: 100%;
left: 300px; <--don't need
}
Using a pre-made system makes a lot more sense than trying to start from scratch. I would recommend using a css system like grid960 http://960.gs/
I have this following chunk of my page.
Style:
.featuredcontainer {
width: 450px;
height: 700px;
margin-left: auto;
margin-right: auto;
position: relative;
right: 160px;
top: 30px;
border: 1px groove grey;
}
.navcontainer
{
margin-left: auto;
margin-right: -8px;
position: relative;
top: 75px;
height: 600px;
width: 300px;
}
And example HTML:
<div class="featuredcontainer">
content
</div>
<div class="lessonnavcontainer">
menu
</div>
When the page is displayed. the navcontainer is to the right of (as it should) but under the featuredcontainer. When I move the navcontainer up using relative positioning, it looks right, but there is a bunch of empty space at the bottom of the page. What do I do?
Surround your two divs with a "wrapper" div like so:
<div id="wrapper">
<div class="featuredcontainer">content</div>
<div class="lessonnavcontainer">menu</div>
</div>
Then to center them, add margins to the wrapper:
#wrapper { margin: 0px auto; }
Then to have the two divs be side by side, add a float:
.featuredcontainer { float: left; }
.lessonavcontainer { float: left; }
In order for the centering to work, you need to declare a width on the wrapper:
#wrapper { width: 800px; }
Put both the nav and the featured containers into another wrapper div.
HTML
<div class='wrapper'>
<div class="navcontainer">
menu
</div>
<div class="featuredcontainer">
content
</div>
</div>
And get rid of all the relative positioning. Relative positioning is not recommended for basic layout issues like this. Use floats instead. The wrapper should have a fixed width, which allows it to be centered properly with margin: 0 auto.
CSS
.wrapper{
width:752px;
margin: 0 auto;
overflow:auto;
}
.featuredcontainer {
width: 450px;
height: 700px;
float:left;
border: 1px groove grey;
}
.navcontainer{
float:left;
height: 600px;
width: 300px;
background:#ff0;
}
JSFiddle http://jsfiddle.net/5w5SC/
Use the float property. Using float, css can position divs next to each other horizontally.
.featuredcontainer {
width: 450px;
height: 700px;
margin-left: auto;
margin-right: auto;
position: relative;
right: 160px;
top: 30px;
border: 1px groove grey;
float: left;
}
.navcontainer
{
margin-left: auto;
margin-right: -8px;
position: relative;
top: 75px;
height: 600px;
width: 300px;
float: left;
}
Thats a starting point, try to use float left or float right and see what happens. Fiddle with it until it looks exactly how you want it.
To get them side-by-side you need to add the float attribute in the CSS. To get them to resize with page width you need to add relative widths to them. To center them on the page (horizontally) you need to put the divs inside a relative positioned div in the html. Here is a fiddle. http://jsfiddle.net/Ne5zs/
Be sure to introduce a clearfix (there are many versions of this technique) on any floated object; then center their containing block element using margin: 0 auto.
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.
I have a image of a shelf that I want to expand and contract with the change in width on the screen resolution. The ends of the shelf have graphically designed images that must remain on the ends. However, as the screen size changes, I want the center to fit the entire width of the shelf. I have tried and can't seem to find a way to do this with all the different screen sizes. You can find an example here: http://jsfiddle.net/SndhQ/. In this example, I changed the images to just colors to make it easy.
Here is the HTML:
<div class="shelf">
<div class="shelfleft"></div>
<div class="shelfline"></div>
<div class="shelfright"></div>
</div>
and Here is the CSS:
.shelf{
float: left;
left: 5%;
margin-left: 5%;
margin-right: 5%;
position: absolute;
top: 160px;
width: 79%;
}
.shelfleft{
background: red;
float: left;
height: 35px;
width: 19px;
}
.shelfline{
background: yellow;
float: left;
height: 35px;
margin-right: -10px;
width: 96%;
}
.shelfright{
background: blue;
float: right;
height: 35px;
width: 19px;
}
Any advice would be greatly appreciated. I only been coding for a few months. Thanks.
Here you are sir:
http://jsfiddle.net/tybro0103/SndhQ/2/
You were on the right track, just a few changes:
1. Insert the "shelfright" div before the "shelfline" div.
2. drop the float and the width on shelfline (divs by default take up as much width as they can)
3. make shelfline's left and right margin's the same as the width of shelfleft and shelfright