I was trying to make a header fill the screen using this CSS:
position:relative;
margin:0;
padding:0;
width:100%;
height:100%;
min-height:100%;
background-image:{image:topbar};
z-index:1;
But when scrolling, there's more of the image to be shown and I have no idea what's wrong, please help?
You may want to add background-repeat:no-repeat;
Related
I have a problem. When i try to move inline style to css file l write this code .
#slider1_container{
position:relative;
top:0px;
left:0px;
Width:600px;
height:300px;
overflow:hidden;
}
#slider1_container.load{
position:absolute;
top:0px;
left:0px;
}
#slider1_container. load .f{
filter:alfa(opacity=70)
opacity:0.7;
position:absolute;
display:block;
background-color:#000000;
top;0px;
left:0px;
width:100%;
height:100%,
}
#slider1_container.load .p{
position:absolute;
display:block;
top:0px;
left:0px;
width :100%;
height:100%;
Background:url(../img/loading.gif
no-repeat center center
}
But when i move tag slides, slideshow dosn't work
I want know what do i move div slides to file css. can you help me.
Thanks
Are you including the CSS file correctly within your page?
with the CSS above you're missing a closing brace from the background image url and you're also using a capitalized "Background" which is incorrect.
background:url(../img/loading.gif) no-repeat center center;
Also where is your css and image "loading.gif" located?
I have structure where in the text needs to flow within the div box in the body. but seems like i cant get it to work. Maybe i am doing something wrong with the position: tag?
Here is the fiddle: http://jsfiddle.net/Tf5Z8/
and this is what i was hoping to accomplish: http://oi58.tinypic.com/332njm9.jpg so that as text keeps getting added (less or more), it keeps the bottom intact and resizes the div accordingly. Right now i have the #bodyContainer set to height:300px;
#bodyContainer { width:1024px; height:300px; margin:auto; background-color:#f4f3e7; padding-top:20px; }
but i don't want to do this since there would be many pages with different text amount.
Thanks a million, Cheers.
Change the #bodyContainer height to auto. Like this: JSFiddle
All you have to do is add min-height. So replace height property with min-height. And you are done.
If you don't have any problems using absolute position try this method. Add relative position to #bodyContainer and absolute position to #sidebarLeft, then float:right sidebarRight. Check this fiddle
CSS changes
#bodyContainer {
width:1024px;
min-height:100px;
margin:auto;
background-color:#f4f3e7;
padding-top:20px;
position:relative;
overflow:hidden;
}
#sidebarLeft {
height:100%;
width:360px;
background-color:#FFF;
margin-left:30px;
margin-bottom:20px;
position:absolute;
top:20px;
left:0
}
#sidebarRight {
height:100%;
width:634px;
float:right;
}
Here is the example.
http://www.poste-ton-look.com/OneMuze/index.html
I try to keep the header as the footer display in this example. Full width with a fixed top position.
The problem is that i making this website responsive with horizontal navigation : if i horizontaly scroll, the header ends. If i try to display the header in a fixed/absolute top position it will kill it.
The goal is to keep the header responsive adjustments, in a full width top-center position.
Thank you for your help,
Sorry for my english.
Seb.
This is how I would proceed to get you aim :
FIDDLE
HTML:
<header></header>
<section>
<span>bla</span>
<span>bli</span>
<span>blu</span>
...
</section>
<footer></footer>
CSS:
*{
margin:0;
padding:0;
}
html,body{
height:100%;
width:100%;
}
header,footer{
position:fixed;
left:0;
width:100%;
height:50px
}
header{
top:0;
background:red;
}
section{
height:100%;
width:4000px;
background:green;
}
span{
position:relative;
top:100px;
margin:100px;
}
footer{
bottom:0;
background:yellow;
}
I keep finding almost solutions to something that I feel should be really simple, but can't figure it out. (note - i'm at a really rudimentary stage of learning CSS right now)
I have one image to put on a page. Center horizontal/vertical. In a div container that is 80% of the window height and width. I would like the image to stretch to fill either the height or the width of that div, based on whichever is smallest.
I'm sure this is simple for most, but again, I'm just learning. Any direction on this would be wonderful.
I created an illustration in case i'm not explaining well enough:
Try this http://jsfiddle.net/David_Knowles/ddh2k/
This does most of what you want. You'll need to add some extra javascript if you really only want the image to be 80% of the available height when the screen height is reduced to less than the image intrinsic height.
<body>
<div id="container">
<img src="http://dummyimage.com/600x400/000/fff.jpg" alt="apropriate alt text">
</div>
</body>
html,
body{
height:100%;
width:100%;
margin:0;
padding:0;
background-color: #eee;
}
#container{
margin: auto;
width:100%;
height:100%;
text-align:center;
font-size:0;
white-space:nowrap;
background:#aae;
}
#container:before{
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
}
img {
width:80%;
height:auto;
display:inline-block;
vertical-align:middle;
background:#fff;
}
ive been making pages using tables forever. recently ive been trying to switch to divs since everyone seems to have done that, and its been a pain. anyway i was thinking if anyone could be nice enough to help me figure this one out. i have attached a picture that will explain the problem because after all a picture's worth a thousand words. thanks in advance.
[image removed]
do you mean something like this?
html:
<div id="content"><br/></div>
<div id="navigation"><div><br/></div></div>
css:
html,body{
height:100%;
margin:0;
padding:0;
}
#content{
width:800px;
border:1px solid red;
min-height:100%;
margin:0 auto;
position:relative;
}
#navigation{
position:absolute;
top:0;
width:100%;
height:100px;
background:gray;
}
#navigation div{
width:800px;
height:100%;
background:lightgray;
position:relative;
margin:0 auto;
}
demo:
http://jsfiddle.net/Z8UDf/
To center a div use CSS margins:
<div style="width: 800px; margin: 0 auto"></div>
Inside that div you can then place your navigation bar which will fill up the space available to it.
With regards to the spaces either side of the main content you have two options.
You can set a background-image on the body at top repeat-x so that it appears that you have a horizontal bar right the way across your page.
You can split the navigation from the main body, have both centered using the method above. Wrap the top 'navigation' div with another div that will be 100% width. You can then style that div as you wish. This has the advantage that you can move it without updating your background images.
use css style
<div style="position:absolute;left:100px;top:150px;" > MyDiv1 </div>
<div style="position:absolute;left:130px;top:150px;" > MyDiv2 </div>