i am trying to position a logo in the middle of a the header, and push it to the buttom.
I got a problem with firefox size (px , em, %) sizes when the image is in the buttom of the header in chrome and IE9, in fire fox it getting out of the border (overflow?).
is there a way to position the image or any object for that matter in the buttom of div in all the browsers?
here my code, mybee it will give you idea what im doing worng:
css:
#header
{
background-image:url("../images/roundShapBrickWall.jpg");
background-repeat:repeat-x;
position:relative;
width:inherit;
height:14.1em;
}
#header img
{
position:relative; // <--- somewhere here i think is the problem.
width:50%;
top:17%;
}
info: this is the position i want it to have, it sits in the middle and the buttom of the header, but in firefox in getting out of the border of the header.
any ideas?
Have you tried: "position:absolute;bottom:0;" to your "#header img"?
You can avoid using position:relative and position:absolute by setting in #header section text-align: center and adjust image position with margin. Also vertical position can be set with margin. But this would only work if you don't have other content in header.
Related
How to clip my top bar with screen. So as I goes down on page i mean scrolling down the page the top bar should also move. Just like in Facebook the top bar moves on screen.
I am searching google from last 2 hours. But unable to get, that what we calls it.
and my HTML/CSS is ..
#topnavbar
{
width:100%;
height:50px;
background-image:url('top.jpg');
background-repeat:repeat-x;
}
HTML
<div id="topnavbar">
</div>
You're talking about fixing the position of the navbar to the top of the screen, right?
top:0;position:fixed;
-
#topnavbar {
width:100%;
height:50px;
background-image:url('top.jpg');
background-repeat:repeat-x;
top:0;
position:fixed;
}
In CSS, positioning elements is a fundamental concept. In this case, you want a fixed position. According to MDN, you should adhere to the following guidelines for fixed position elements:
Do not leave space for the element. Instead, position it at a
specified position relative to the screen's viewport and doesn't move
when scrolled. When printing, position it at that fixed position on
every page.
To reiterate, if you want to keep an element in the same position, regardless of where the page is scrolled, use position:fixed
#topnavbar{
position:fixed;
}
Example
It seems there are some sort of image slider on your page. So what I will suggest you to include z-index also.
#topnavbar
{
width:100%;
height:50px;
background-image:url('top.jpg');
background-repeat:repeat-x;
position:fixed;
z-index:500;
}
What you need to search for is how to use the css attribute position: fixed; to have a div or other element 'stay where you put it' relative to it's containing element.
Really quick and rough example:
http://jsfiddle.net/c93cK/
I am playing around with bigcommerce at the moment and I am trying to recreate the footer structure for the header. You can see here:
http://thespeedfactory.mybigcommerce.com/
If you look at the footer, how it is full width but the content is central within it.
I want the header to be exactly the same, black with pink/white highlights.
Ive tried moving around the structure within bigcommerce, but I am having a brain failure in getting it to do and look how I want despite knowing it is based around containers and margins.
Any guidance is appreciated.
If I understand you correctly, you want:
the header (#Header) to span the entire width of the page
the footer (#ContainerFooter) to span the entire width of the page
the header (and footer to have the same styling (colors, etc.)
the content area (#Wrapper) to stay a fixed width and centered on the page
To do this, add the following css:
#Container {width:100%;}
#Header {width:100%; margin:0, auto;}
The above css allows the header (by way of its parent container) to stretch the width of the browser page. You'll notice #Wrapper is shifted to the left. Add this:
#Wrapper {margin:auto;)
This centers the #Wrapper.
Your structure should be in place and now you can add your colors, etc. to the #Header to make it match the footer.
This is pretty basic html/css.
Just create a div, place a container in it and start styling.
HTML:
<div id="header">
<div id="container">
<p>content</p>
</div>
</div>
CSS:
#header {
width: 100%;
height:400px;
background:black;
position:absolute;
border-top:3px solid #ff25a7;
}
#container {
width:90%;
height:300px;
margin:0 auto;
}
#container p {
font-size:30px;
padding:10px;
color: #ff25a7;
}
Here's a jsFiddle to help you get started.
You can try giving the header the same class as the footer and afterwards (if the footer's position is absolute bottom), set the position to absolute top:0px;
I want to create a layout where I want to display an image to the left and content on the right. The image should stay constant when the content scrolls.
The css I'm using:
<style type="text/css">
#page-container
{
margin:auto;
width:900px;
background-color:Black;
}
#header
{
height:150px;
width:650px;
}
#main-image
{
float:left;
width:250px;
height:500px;
background-image:url('../images/main-image.png');
position:fixed;
}
#content
{
margin-left:250px;
padding:10px;
height:250px;
width:630px;
background-color:Teal;
}
</style>
The HTML:
<div id="page-container">
<div id="header"><img src="someimagelink" alt="" /></div>
<div id="main-image"></div>
<div id="content"></div>
</div>
Alot of time on this site and I have understood that background-attachment:fixed positions the image in the entire viewport and not the element it is applied to.
My question is how do I go about creating that kind of layout?
I do not want to give that image as a background image, as if the window is resized, it might get hidden. I want scrollbars to appear if the window size is less than 900px( my page width) so that the image can be viewed at all times.
That happens with this code, however I would like the image to start at my element instead.
How do I go about doing this??
Thanks in Advance :)
Edited:
I took the advice and added a position:fixed property to #main-image. Using the HTML and CSS as shown above.
Now, I also want to fix the header so that it does not move. Basically, only my content section should scroll.
However, if I add a position:fixed to the header, my #main-image and #content now sit on top of my header.
If I add a margin-top:150px (since my header height is 150px) to the #main-image, it works fine and moves down appropriately.
However if I add a margin-top:150px to the #content, my header moves down by 150px and still sits on top of my #content.
Can someone please explain why this is happening?
Thanks in Advance :)
Take a look at this link:
http://www.barelyfitz.com/screencast/html-training/css/positioning/
You can learn how to position Div's with it.
This will solve your problem:
#main-image {position:fixed;}
EDIT:
I'm not sure of what caused your problem but here is the solution:
#content{
position:relative;
top:150px;
}
My Guess:
I think that happened because when using position:fixed those 2 div's were positioned relative to the the browser window, while the other one was relative to the document itself.
In this link you will see more about positioning and you can test some of these features related to the position property:
http://www.w3schools.com/cssref/pr_class_position.asp
About the fact that one div was positioned over another, you should search for the 'z-index' property. Firefox has a 3D mode so you can see this more clearly:
http://www.addictivetips.com/internet-tips/browse-internet-in-3d-using-mozilla-firefox-11-tip/
Set a min-width on html and body.
Have you tried setting your #page-container to relative and your #main-image container to absolute and setting the position using top, bottom, etc. Then you should also be able to float your #content container to the right.
On the site: ukrainiansecret.com
I would like to get rid of that green right margin of the banner, and to have it exactly as the left side. Have tried to stretch the banner width but it didn't work out.
Thanks
The quick and dirty way I did it was add a width:100%; to the div.banner_main, ul#portfolio, ul#portfolio li and ul#portfolio li img - that will make the image stretch all the way across the screen.
Example:
div.banner_main,
ul#portfolio,
ul#portfolio li,
ul#portfolio li img {
width:100%;
}
I have a variable width header that must have a background color that is as wide as the text (no wider). The only way I can think of doing this (with no extra markup) is to set the display to inline-block or float it to the left. The problem then though is that I cannot center the header (another requirement).
The closest I have got so far is by setting position: relative; on a floated header, pushing it across 50% from the left and then pulling it back 25% with negative margin, however this does not consistently center the header. It must remain in the flow of the document so position: absolute; is another no-go.
If you are aware of a way to do this using CSS only with no extra markup please let me know (pseudo-elements are fine, I'm not hassled about IE7 support)!
Solved using display: table; on the heading (with margin: 0 auto;).
you can give text-align:center; to the body as a global arrtibute & give display:inline-block to your header div. So,it's center your dynamic width in center like this :
CSS:
body{margin:0; padding:0;text-align:center}
p{text-align:left;}
.header{background:red;display:inline-block;}
Check this example http://jsfiddle.net/vpcXS/
replace the p tag with center as my markup is
<div id="header">
<center>hello</center>
</div>
and it's CSS is
body{
width:100%;
}
#header{
text-align:center;
}
#header center{
display:inline-block;
background:red;
}