I have a problem with my site. I want that the shadow stops at the end of my textbox.
HTML
<body>
<div id="shadow" class="floatfix">
<div id="shadowleft"></div>
<div id="shadowtop"><img src="img/shadowcornerleft.png" alt="hoek" id="shadowcornerleft" /><img src="img/shadowcornerright.png" alt="hoek" id="shadowcornerright" /></div>
<div id="shadowright"></div>
<div id="content">
This is my CSS code:
#shadow
{
margin-left: auto;
margin-right: auto;
margin-top: 75px;
width: 974px;
}
#shadowleft
{
position: absolute;
height: 100%;
width: 27px;
margin-top: 42px;
background-image: url("img/shadowleft.png");
background-position: top left;
background-repeat: repeat-y;
}
#shadowright
{
position: absolute;
height: 100%;
width: 27px;
margin-top: 12px;
margin-left: 947px;
background-image: url("img/shadowright.png");
background-position: top right;
background-repeat: repeat-y;
}
#shadowtop
{
width: 892px;
height: 30px;
margin-left: auto;
margin-right: auto;
margin-top: 45px;
background-image: url("img/shadowtop.png");
background-position: 0 0;
background-repeat: repeat-x;
}
#shadowcornerleft
{
position: relative;
left: -42px;
top: 0;
}
#shadowcornerright
{
position: relative;
left: 850px;
top: 0;
}
#content
{
width: 920px;
margin-left: auto;
margin-right: auto;
background-color: white;
border-bottom: 1px solid #cccccc;
}
I think that I have this problem because of the "height: 100%". But I don't know how to fix it.
There's a much simpler way to do this. Make a new background image 960px wide by 10px high that has your shadow at either side of it. (You may need to tweak the width to get 920px of white in the middle with the shadows down the sides)
Use your #shadow div to add that background around #content eg:
#shadow
{
width: 960px;
margin-left: auto;
margin-right: auto;
background: url(shadow-sides.png) repeat-y left top;
}
Alternatively you can probably make your #content div stretch down by adding min-height: 100%; to it and an IE6 hack:
* html #content { height: 100%; }
100% shadow height has no height to count 100% from so it uses auto mode. So so far I see 3 ways to fix problem and none of them are nice as it should be:
Setting fixed height on parent div (bad if content extends)
Use 3x3 table (but once again people say not to use tables for layout)
Use double sided shadow background image to fill content div. 1px height 974px width bg image with repeat-y; (not very elegant if site width changes)
id say that your HTML is wrong. Its bad practice to have self closing div's
wrap them around your content and use negative margin's and background positions to get the right effect that spans the height of the fluid content
this is a bit sudo, as it ripped from another site of mine, but ti should give you the basic of how it should be done
<div id="header">
<div class="wrapper">
<div class="inner">
...
</div>
</div>
</div>
#header {
height:100%;
background:transparent url(../img/left-gradient.png) repeat-y scroll left center;
margin:0 auto;
max-width:60em;
min-width:40em;
padding-left:7px;
text-align:left;
width:60em;
}
#header .wrapper {
background:transparent url(../img/right-gradient.png) repeat-y scroll right center;
padding-right:7px;
}
#header .inner {
background-color:#FFFFFF;
}
Related
The image is going off to the right of the div, I am trying to align it to the left.
here you can see there is not background on the image
.title {
width: 500px;
height: 300px;
position: absolute;
display: block;
float: left;
padding: 0px;
margin-left: 0px;
background: transparent url(https://lorempixel.com/200/200) no-repeat top left;
}
<div class="title"></div>
Here it shows the sizing of the div, this is aligned to the left yet the image itself which has no excess background, it is just the text in the image
There may be unnecessary properties in CSS, this is just to show what i have tried
I took an image from google just for the test and its aligned to the left.
Maybe the issue in other selector.
By removing position:absolute; image will positioned on top.
.title {
width: 500px;
height: 300px;
/*position: absolute;*/
top: 300px;
display: block;
float: left;
padding: 0px;
margin-left: 0px;
background: transparent url(https://lorempixel.com/200/200) no-repeat top left;
}
<div class="title"></div>
I'm having problem with making a div stretch and shrink depending on the size of the browser.
Here is the html
<div class="content_container">
<div class="content_menu"></div>
<div class="content_left"></div>
<div class="content"></div>
</div>
.content_container{
margin: 0 auto;
height:100vh;
display:block;
}
.content_left{
background: #eee none repeat scroll 0 0;
display: inline-block;
float: right;
padding-top: 50px;
position: relative;
text-align: center;
width: 25%;
height:calc(100vh - 50px);
}
.content_menu{
background: #eee none repeat scroll 0 0;
float: left;
height: 100px;
width: 25%;
height:100vh;
}
.content{
background: #fff none repeat scroll 0 0;
display: inline-block;
margin-bottom: 0 !important;
margin-right: auto !important;
vertical-align: top;
width: 50%;
}
I've already tried giving height:auto, 100% and 100vh but none seems to work.
The .content_left and .content_menu fall short of the height of the .content so there are blank white spaces.
Is there anyway those layers can resize themselves to fit to the height as well as the .content div.
Can anyone help me out?
Use viewport width/height to set an elements dimensions relative to the window
body {
padding: 0; margin: 0;
width: 100%;
width: 100vw;
}
div {
background: lightblue;
height: 45px;
margin-top: 20px;
}
#two {
width: 100%;
width: 100vw;
}
#one {
width: 60%;
width: 60vw;
}
<div id="one">div one</div>
<div id="two">div two</div>
I'm guessing the blank white spaces you are talking about are those surrounding the gray elements on the left and right side. Those are caused by the default margin on the body. Just set the body margin to zero.
body { margin: 0; }
Using your markup in your question, it appears to work as I think you want it to.
I'm attempting to make a header with the div's centered with a logo in the middle. With the Logo div hanging over, which I've successfully done. I can not however figure out how to place the logo div in the middle of the link divs for the life of me.
Any help would be appreciated, google searching hasn't gotten me any luck, but I'm not sure I know what to search for. I'm not good at making things look pretty normally :(
Page Layout:
Header (overlay)
Content (z-index: -1)
Image of site without a float declared on .headerLogo
Image of site with float: left declared on .headerLogo
html:
<div class='header'>
<div class='headerLink'>Home</div>
<div class='headerLink'>Contact</div>
<div class='headerLogo'></div>
<div class='headerLink'>Menu</div>
<div class='headerLink'>Connect</div>
</div>
<div class='content'>
</div>
css:
*{
margin: 0;
}
body,html{
background-color: #000;
color: #FFF;
text-align: center;
font-family: calibri;
height: 100%;
overflow:auto;
}
.header{
top:0;
height: 100px;
line-height: 100px;
width: 100%;
display: inline-block;
border-bottom: lime 10px solid;
margin:0;
position: static;
background-color: #000;
font-size: 24px;
}
.headerLink{
display: inline-block;
float: center;
margin-left: 60px;
margin-right: 60px;
margin-top: 0px;
margin-bottom: 0px;
}
.headerLogo{
display: inline;
float: left;
position: static;
background-image: url('/images/logo.jpg');
background-image: no-repeat;
background-position: left top;
background-size: 100%;
margin-left: auto;
margin-right: auto;
background-color: lime;
color: lime;
width: 200px;
height: 200px;
line-height: 100px;
}
.content{
z-index: -1;
float: left;
text-align: center;
min-height: 100%;
width: 100%;
margin-top: -110px;
margin-bottom: -50px;
background-color: #333343;
}
You've got a couple ways to go about this. I think the easiest way is to use a fake placeholder to make the horizontal space between menu items in the middle, then have the logo be absolutely positioned on top.
HTML:
<div class='header'>
<div class='headerLink'>Home</div>
<div class='headerLink'>Contact</div>
<div class='headerLogo'></div>
<div class='headerLink headerLogoFake'></div>
<div class='headerLink'>Menu</div>
<div class='headerLink'>Connect</div>
</div>
<div class='content'>
</div>
CSS:
.headerLogo{
display: inline;
float: left;
position: static;
background-image: url('/images/logo.jpg');
background-image: no-repeat;
background-position: left top;
background-size: 100%;
background-color: lime;
color: lime;
width: 200px;
height: 200px;
line-height: 100px;
position:absolute;
top:0;
left:50%;
margin-left:-100px;
}
.headerLogoFake {
width:200px;
}
As you probably know, if you just leave it as you have, without the float, it'll be in the middle, but it'll push the green bottom border down. This will place a fake empty thing in the middle, but at the same height as the menu items, so won't push it down. It'll add the logo in on top.
Working Fiddle
.headerLogo{
position:absolute;
display: inline;
float: left;
left 50%
position: static;
background-image: url('/images/logo.jpg');
background-image: no-repeat;
background-position: left top;
background-size: 100%;
margin-left: -50px;
margin-right: auto;
background-color: lime;
color: lime;
width: 100px;
height: 100px;
line-height: 100px;
}
Your mark-up provided did not produce the result you were looking for, so I applied the bare minimal styling to accomplish what you are asking for.
Most importantly float:center; does not exist.
If you give elements a property of display:inline-block;, then you can use text-align:center; around the container to center all of the elements.
.header {
text-align:center;
}
.headerLink {
display:inline-block;
padding:10px;
}
.headerLogo {
display:inline-block;
height:100px; width:100px;
background:red;
margin:0px 10px;
}
Then, to line them up with your logo, vertically, give them a vertical-align:top property and set the margin to near half the width of the logo
http://jsfiddle.net/5V29a/1/ - UPDATED DEMO
Simple question here but struggling with the best way to accomplish what I want... I have an image that I am trying to keep centered in the browser and responsive. Setting width to 100%, the image responds perfectly (horizontally). What I am having trouble with is the height. I do not want the browser to ever scroll and have the image, with correct ratio, at center, with 20px padding.
Dropbox viewer has a great example of exactly what I am trying to accomplish, see here: https://www.dropbox.com/s/7zmau5ckx9qe2q1/P-20131215-00017_HiRes%20JPEG%2024bit%20RGB.jpg
UPDATE BELOW WITH MORE RECENT CODE
I have a demo here of what I have so far (if you crunch the browser vertically, the scroll bar will appear): http://jsfiddle.net/k7JG5/7/
HTML
<div id="top_nav">Logo Here</div>
<div id="img_wrap">
<center><img src="http://goldenleafdesigns.com/images/random- images/soul_id_select_image1.jpg" /><center>
</div>
CSS
body {
margin: 0px;
padding: 0px;
background-color: #000;
}
#top_nav {
height: 44px;
width: 100%;
background-color: #FFF;
text-align: center;
line-height: 44px;
}
#img_wrap {
max-width: 100%;
max-height: 100%;
padding: 20px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
img {
outline: 0;
max-width: 100%;
max-height: auto;
}
so, whats the best way to accomplish the height to stay responsive with no scroll?
Maybe this works for you:
http://jsfiddle.net/4LNND/
#img_wrap {
max-width: 100%;
max-height: 100%;
padding: 20px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
position:absolute;
bottom:0;
left:0;
right:0;
top:44px;
}
#img_wrap img {
outline: 0;
max-width: 100%;
max-height: 100%;
display:block;
}
There are a bit more complicated ways to do it, this is the simplest
jsBin demo
HTML:
<div id="img_wrap"></div>
CSS:
#img_wrap{
position:absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
background: url('pathToImage.jpg') no-repeat center center fixed;
background-size: contain;
}
// Or instead of contain use cover if you don't mind the image being cut-off
I want to have a background image stretched vertically and positioned center of page.
I thought it would be simple, but it seems I cannot center it in any way. Here is my CSS code:
HTML
<div id="background">
<img src="bkg.jpg" class="stretch" />
</div>
CSS
#background {
width: auto;
height: 100%;
position: fixed;
z-index: -999;
}
.stretch {
width: auto;
height: 100%;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #525252;
}
Do you have any ideas how I can have this background centered? It's now aligned to the left. Thanks!
This works how you want it.
It stretches the image vertically and positions it in the center.
jsFiddle here
body {
margin:0px;
background-color: #525252;
}
#background {
width: 100%;
height: 100%;
position: fixed;
background: url('bk.jpg') center / auto 100% no-repeat;
}
Alternatively, if you want support for older browsers, see this jsFiddle solution. It uses the img tag as opposed to setting the image via background-image.
Try doing this:-
body {
margin: 0px auto;
width:1000px;
background-color: #525252;
}
OR
In this case you need to remove "position: fixed;":
#background {
height: 100%;
z-index: -999;
margin: 0px auto;
width:1000px;
}
You need to give some fixed width to body or the DIV.
Hope this helps!