sorry if this is a question that's been answered before but I've been searching and I can't find a solution that quite fits. I'm trying to get my fixed header to stay in line with the content but can't seem to get it to stay there. Whenever the window is resized the header moves left or right. The way I have it setup now is the only way I've found of getting the header to stay inline with the content at all. Otherwise it just hangs off the left side of the page.
Ideally what I'd like is to just have the header slightly bigger than the rest of the content and stay exactly in line with it no matter the window size, mainly because the logo hangs down.
the live site is here:
andrewillustration.com
Here is the code:
CSS
body{
background-attachment: fixed;
margin: 0px;
font: 400 16px/22px 'PT Sans Narrow', sans-serif;
color: #099;
background-color: #B4BFCD;
background-image: url(images/noisy_grid.png);
}
h1{font: 400 58px/60px 'Open Sans Condensed', sans-serif; color:#F05522; margin-left:65px;}
h2{
font: 400 18px/22px 'Open Sans Condensed', sans-serif;
color: #069;
}
h3{font: 400 14px/16px 'Open Sans Condensed', sans-serif; color:#6a6969;}
ul{margin:0px; padding:0px;}
a {
text-decoration: none;
color: #FFF;
}
a:hover {color:#099;}
a img{border:0px;}
#container{
width: 950px;
margin: 0px auto 300px auto;
Background:url(images/torn_paper_background.png) repeat-y;
overflow: auto;
padding-bottom: 100px;
}
/****************************************************/
/* HEADER */
/****************************************************/
#header{
background-color: #F05522;
width:712px;
height: 115px;
padding: 0px 43px;
position: fixed;
top: 0px;
left:62%;
margin: 0 auto 0 -475px;
}
#header #logo{
position: absolute;
float:left;
left: -157px;
}
#header #main-menu{float:right; padding-top:45px;}
#header #main-menu li{
float:left;
list-style:none;
margin-left:27px;
font: 400 16px/20px 'Open Sans Condensed', sans-serif;
color: #FFF;
}
HTML
<div id="header">
<div id="logo"><img src="images/logo-corners.png"></div>
<ul id="main-menu">
<li>Portfolio</li>
<li>About</li>
<!--<li>Experience</li> -->
<li>Contact</li>
</ul>
</div>
The way I'd do it would be to add a fixed-position wrapper around the header (with a width of 100%). You could then give the header a fixed width to match your content, and give it a margin of 0 auto to get it centred. Float your logo to the left, and apply the background-color to the menu ul (which is floated right), setting margins and paddings as required so that it takes up the remainder of the available space.
You'd need to add a bit of padding to your topmost content div to stop it being hidden by the menu, though.
Related
I am coding CSS from scratch for the first time and I am getting a lot of trouble to make it the perfect way.
As you can see in this image, the blue menu in the top has a white border.
My current css code for nav is:
nav, footer {
font-family: "rogue-sans-ext", sans-serif;
font-style: normal;
font-weight: 700;
border-width: 0px;
padding: 0px 0px 0px 0px;
}
nav {
background-color: #005EFF;
width: 100%;
position: static;
top: 0;
left: 0;
text-align: center;
font-size: 25px;
}
By the way, I can't figure out how to center vertically the text of the nav items. I have tried the vertical-align option, the line-height method and the absolute positioning and negative margin, but none seems to work properly.
Thanks,
mikeysantana
Probably, your problem is given by the default body padding value applied by browser.
Try applying this style:
body, html {
margin: 0;
padding: 0;
}
I have some body and page settings that are keeping everything nicely centered in my site, which is my objective.
However, I also have some text in the center, which currently is sprawled along the entire width of the page when it's long. Every time I try to set a css width property, like max width, it decides to go haywire with it's positioning, and land itself far left of the center.
I guess there's some issue with my overall page center positioning, and setting any type of width property to a div.
EX of things nicely centered, but sprawling text: https://www.flickr.com/photos/77598212#N03/34191523510/in/dateposted-public/
and when I try to set any sort of width:
https://www.flickr.com/photos/77598212#N03/34191523450/in/dateposted-public/
I'd appreciate any and all thoughts. Thank you. -Wilson
the css:
*{
margin:0;
padding:0;
}
body{
text-align:center; /*For IE6 Shenanigans*/
}
button {
color: #900;
font-weight: bold;
font-size: 150%;
text-transform: uppercase;
}
h1{
margin-top:20px;
font-size: 250%;
overflow:hidden; /* older browsers */
font-family: hobeaux-rococeaux-sherman, sans-serif;
}
img {
max-width:500px;
max-height:340px;
box-shadow: 1px 5px 5px grey;
border-style: groove;
border-width: 1px;
margin-top:20px;
}
#ShowText{
overflow:hidden; /* older browsers */
word-wrap: break-word;
padding-top: 100px;
font-size: 18px;
font-family: vendetta, serif;
line-height: 25px;
}
If you have a fixed width on a block element then simply give it margin: 0 auto; to center it.
As you can see from this image of my site:
https://www.flickr.com/photos/77598212#N03/33735427334/in/dateposted-public/
My button is crammed right underneath the randomly generated text. Instead, I'd like to lower it.
But additionally, I'm trying to keep it completely "anchored" to the page, because right now when I click the button, a random image generates, but that image is moving the button vertically depending on the size of the image. Not good.
Instead, I'd like that button to remain in the same position, always.
Any thoughts/help would be appreciated. I'm still quite new to all this. Thank you. -Wilson
link to the actual website http://www.wilsonschlamme.com/test4.html
css:
*It's pretty simple. First two elements here are controlling centering the page. The rest are self explanatory, showtext refers to the random text generator.
*{
margin:0;
padding:0;
}
body{
text-align:center; /*For IE6 Shenanigans*/
}
button {
color: #900;
font-weight: bold;
font-size: 150%;
text-transform: uppercase;
}
h1{
margin-top:20px;
font-size: 250%;
overflow:hidden; /* older browsers */
font-family: hobeaux-rococeaux-sherman, sans-serif;
}
img {
max-width:600px;
max-height:440px;
box-shadow: 1px 5px 5px grey;
border-style: groove;
border-width: 1px;
margin-top:20px;
}
#ShowText{
overflow:hidden; /* older browsers */
word-wrap: break-word;
padding-top: 100px;
max-width: 1000px;
font-size: 25px;
font-family: vendetta, serif;
line-height: 25px;
margin: 0 auto;
}
Use:
#buttonfun {
margin-top: 20px;
}
Wrap the img with a div:
<div class="image-wrapper">
<img src="images/297.jpg" />
</div>
and add the CSS:
.image-wrapper {
height: 440px;
}
When resizing the browser I noticed that all the elements get out of place and the website layout gets distorted. This also occurs on with low-resolution.
Is this because I have used position:relative;? How can I make the page elements not move from their position when resizing.
body{
background:url(../img/bg-silver.jpg) #F2F2F2;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size:11px; line-height:18px; color:#636363;
margin-top:10%;
}
#containerHolder {
background: #eee;
padding: 5px;
position:relative;
}
#container {
background: #fff;
background:rgba(245,245,245,0.8);
border: 1px solid #ddd;
}
#main {
margin: 0 0 0 20px;
padding: 0 19px 0 0;
}
That usually only happens with floats. In any regard what you want to do is create a wrapper div with the width you want, and then just set overflow to scroll:
HTML:
<body>
<div id="wrapper">
<!-- content here -->
</div>
</body>
CSS:
#wrapper {
width:980px;
overflow-x:scroll;
}
It's impossible to tell without seeing your html code but using the css style "min-width" on your outer container (whichever element that might be) should solve the problem.
I have the following css set up for my page. When the page loads the background color doesn't always take effect. I have to refresh my page once or twice before the color works. Anyone know why? The background-image isn't as tall as the entire page and it's a gradient. So I'm taking the bottom pixel color of the gradient and using that as the page bg color.
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #000000;
margin: 0px;
padding: 0px;
background-color: #001833;
background-image: url(images/page_bg.jpg);
background-repeat: repeat-x;
background-position: left top;
}
Try:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #000;
margin: 0;
padding: 0;
background: #001833 url(images/page_bg.jpg) repeat-x top;
}
(You don't need to specify 'left' if its repeating.)
Also, if you're using CSS reset (or not), make sure your body uses 100% height:
html, body {height: 100%;}