This must be the most frequently occurring issue in my life!
I have to position a fixed DIV (800px) inside a 100% DIV and as always it works fine in everything but IE. I have tried the old "text-align" trick but nothing this time, I just can't get it to work.
If you want to inspect the actual page its www.chunkydesign.com and any answer would be greatly appreciated.
Here is the HTML (CSS Below)
<body>
<div id="navContainer">
<div id="navTopSpacer"></div>
<div id="navMain">
<div id="navContent">
<div id="navLogo"></div>
<div id="navLinks">
<h1>SERVICES ABOUT PORTFOLIO CONTACT</h1>
</div>
</div>
</div>
<div id="navBotSpacer"></div>
</div>
</body>
The devil code itself:
body {
padding: 0px;
margin: 0px;
}
navContainer{
width: 100%;
height: 110px;
}
navTopSpacer {
width: 100%;
height: 12px;
background-image: url('../images/core/nav_topspacer.jpg');
}
navMain {
width: 100%;
height: 88px;
background-image: url('../images/core/nav_main.jpg');
}
navContent {
text-align: center;
width: 800px;
height: 88px;
margin-left: auto;
margin-right: auto;
}
navLogo {
float: left;
width: 164px;
height: 88px;
background-image: url('../images/core/logo.png');
background-position: 0px 20px;
background-repeat: no-repeat;
}
navLinks {
float: right;
width: 400px;
height: 88px;
}
navLinks h1 {
font-family: Arial, Verdana, sans-serif;
text-align: right;
font-size: 13px;
color: #FE9900;
font-weight: 600;
padding-top: 40px;
word-spacing: 15px;
letter-spacing: 1px;
margin: 0px;
}
navBotSpacer {
width: 100%;
height: 10px;
background-image: url('../images/core/nav_botspacer.jpg');
}
By leaving a comment above your doctype you're making IE go into quirks mode, which makes rendering a nightmare.
Remove the comment and have NO text, spaces or anything above your doctype declaration.
Try using this markup:
<div id='header'>
<div class='center'>
<div id='logo'><h1><a href='' title=''></a></h1></div>
<ul id='navigation'>
<li>SERVICES</li>
<li>ABOUT</li>
<li>PORTFOLIO</li>
<li>CONTACT</li>
</ul>
</div>
</div>
And styling like this:
#header{
background:#cae1e9;
border-top:12px solid #7ebdce;
border-bottom:10px solid #a8d2de;
height:88px;
}
.center{
width:800px;
margin:auto;
}
Then just maybe float logo to the left and float navigation to the right or do whatever you want. But this kind of makup is much easier to understand and maybe see where is the error.
Combine that with the answer Paul gave you and i think that's it.
Related
I would like to make my tag is big as the parent div (#logo, and i'm having trouble making a 100% padding without making it bigger than the parent's tag.
HTML
<div id="header">
<div id="logo">
</div>
<div class="hide" id="navigation">
<ul>
<li>About</li>
<li>Examples</li>
<li>Form</li>
<li>Contact</li>
</ul>
</div>
</div>
CSS
div#logo {
background: url(https://i.imgur.com/sHTtXk4.png) no-repeat center center;
background-size: cover;
float: left;
line-height: 80px;
width: 10%;
height: 80px;
text-align: center;
}
div#logo a {
background: #fff;
width: 100%;
height: 100%;
padding: 100%;
https://jsfiddle.net/vwbo9exg/
Remove padding and add display for a tag
div#logo a {
background: #fff;
width: 100%;
height: 100%;
/* padding: 100%; */
display: inline-block; /*Add this*/
}
I've read through countless posts about this looking for a solution but can't seem to find one that works for me. I've built a fairly basic portfolio site, and am trying to build it such that the first thing you see on load is the word 'Developer', and you then scroll down to the portfolio.
I've given my portfolio header a top padding to fill the screen, but can't get the word 'Developer' to center within that. I'm pretty new so have probably done something very wrong!
HTML:
<header id="hero">
<div id="hero_text">Developer.</div>
<img class="arrow" src="Images/lake_tahoe_img/arrow.svg" alt="Down arrow"></a>
<a href="index.html" id="logo">
<h1>Rob Wood</h1>
<h2>Front-end Developer</h2>
</a>
<nav>
<ul>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
CSS:
#hero {
padding-top: 800px;
z-index: -2;
}
#hero_text {
position: fixed;
margin-left: auto;
margin-right: auto;
top: 35%;
color: white;
font-size: 9em;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
}
.arrow {
width: 50px;
top: 70%;
position: center;
padding-left: 50%;
position: fixed;
}
Add to your #hero_text text-align:center. Remove position:fixed
The problem with position:fixed is the element is made like an absolutely positioned element and will cause it to collapse unto itself giving it no width and, therefore, nothing to center within.
An alternative would be to leave the fixed positioning but give that element a width. Along with auto margins, which you set, this will center the element plus center the text within the same element.
As mentioned in the comments, there is no such thing as position:center.
you want something like this??
to position developer in the center of the page i used display:flex; justify-content:center and align-items:center; like this, the words developer always stays in the center
body{
margin: 0px;
}
.box{
background-color: pink;
background-size: cover;
height: 100vh;
position: relative;
display:flex;
justify-content: center;
align-items: center;
}
h1{
font-size:25px;
}
.down{
height: 100px;
}
<div class="box">
<h1>
Developer
</h1>
</div>
<div class="down">
<p>
the rest of the page
</p>
</div>
I think you're looking for something like this :
.outer-container {
position: fixed;
display: table;
width: 100%;
height: 100%;
background: #ccc;
}
.inner-container {
display: table-cell;
vertical-align: middle;
text-align: center;
}
#hero {
display: inline-block;
background: #fff;
}
#hero_text {
font-size: 9em;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
}
#hero ul {
list-style-type: none;
}
<div class="outer-container">
<div class="inner-container">
<header id="hero">
<div id="hero_text">Developer.</div>
<img class="arrow" src="Images/lake_tahoe_img/arrow.svg" alt="Down arrow">
<a href="index.html" id="logo">
<h1>Rob Wood</h1>
<h2>Front-end Developer</h2>
</a>
<nav>
<ul>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
</div>
</div>
(see also this Fiddle)
In the following solution, one drawback is that you have to fix a height and a line-height to the outside div (the gray one).
.abs-center {
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
margin: auto;
}
.v-center {
background: yellow;
display: inline-block;
vertical-align: middle;
line-height: normal;
}
#graybox {
height: 120px;
line-height: 120px;
background: #bbb;
text-align: center;
}
<div id="graybox" class="abs-center">
<div class="v-center">
<p>vertically<br />centered</p>
</div>
</div>
I'm having some trouble floating some elements. I've reproduced an example here.
Basically I want Logout to appear on the right (just like the image appears on the left), but am having trouble doing so.
If you swap float: right with float: left and vice-versa in .logo and user-header, Logout still appears on the new row while the logo will correctly float right.
I feel I am missing something obvious here.
Any ideas?
Thanks.
http://jsfiddle.net/xVXPk/15/
Try this. ( always do float:right, float:left, center, clear:both ) -- note close your image tags.
<div id="header">
<div class="user-header">
<label class="user"></label>
<a class="" href="#">Logout</a>
</div>
<div class="logo">
<img src="#"/>
</div>
<div class="company-header">
<a title="title" href="index.php"><b>Hello</b></a>
</div>
<div style="clear:both; height:1px; width:99%" ></div>
</div>
#header {
width: 600px;
background-color: #585D63;
padding: 15px 0px;
}
#header .logo {
float: left;
margin-left: 30px;
}
#header .logo img {
height: auto;
}
#header .company-header {
font-size: 150%;
letter-spacing: 1px;
text-align: center;
width: 200px;
margin: 0 auto;
}
#header .user-header {
float: right;
margin-right: 30px;
}
#header .user-header a {
max-width: 120px;
height: auto;
}
duplicate of this post:
How to align 3 divs (left/center/right) inside another div?
To explain, as far as I understand the issue, when the browser draws the page, it will render the center content, first as it process the page in logical order. then apply the floats this is why the right hangs. But by adding the floats first the browser will know before rendering the center to float the content to the right, because it goes , left center right in the first case, and in the second right left center. If that makes sense. Sort of order of processing operations.
You simply haven't done the math right. There is not enough space for the div class="user-header" to be positioned on the RH-side. See the JSFiddle with borders.
EDIT: and you need to float:left the div class="company-header" as well: live demo.
Used code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Live demo</title>
<style>
div {
border: 1px solid black; /* added */
}
#header {
width: 600px;
height: 60px; /* added */
background-color: #585D63;
padding: 15px 0px;
}
#header .logo {
float: left;
width: 33%;
max-width: 180px;
padding: 5px 30px;
}
#header .logo img {
max-width: 120px;
height: auto;
}
#header .company-header {
font-size: 150%;
letter-spacing: 1px;
margin: 0 auto;
width: 33%;
text-align: center;
float: left; /* added */
}
#header .user-header {
float: right;
w/idth: 33%; /* de-activated */
max-width: 180px;
padding: 5px 30px;
}
#header .user-header a {
max-width: 120px;
height: auto;
}
</style>
</head>
<body>
<div id="header">
<div class="logo">
<img src="#">
</div>
<div class="company-header">
<a title="title" href="index.php">
<b>Hello</b>
</a>
</div>
<div class="user-header">
<label class="user"></label>
<a class="" href="#">Logout</a>
</div>
</div>
</body>
</html>
Add class to anchor: <a class="logout" href="#">Logout</a>
css:
#header {
position: relative;
}
.logout {
line-height: 58px; /* Same height as #header */
position: absolute;
top: 0;
right: 30px; /* Same padding-left of logo */
}
DEMO
I have seen a lot of similar topics; however I do not seem to get the css code right.
Layout of my page: has a background image. Then I want to create a white page in the middle with different blocks () starting with navigation at the top, header,content.
Im not getting the navigation bar to display at the top of the page (without space between the top of the browser and the bar) there is a small gap in between). Furthermore I want my content to always fill the screen until 'just' above the lower part of the browser.
HTML
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href ="css/main.css">
</head>
<body>
<div class="wrapper">
<div class="nav">
<ul>
<li>Home</li>
<li>Education</li>
<li>Experience</li>
<li>More</li>
<li>Contact</li>
</ul>
</div>
<div class="header">
</div>
<div class="maincontent">
</div>
</div>
</body>
</html>
CSS
html, body {
height: 100%;
margin: 0;
}
body {
background-image: url("bgimg.png");
background-repeat: repeat;
}
.wrapper{
width: 960px;
height: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0 auto;
position: relative;
top: 0px;
background-color: white;
}
.nav {
background-color: white;
width: 100%;
height: 40px;
font-family: "Sans-serif", Verdana;
}
.nav li {
float: left;
list-style: none;
float: left;
display: inline;
text-align: center;
width: 20%;
line-height: 40px;
}
.nav a {
display: block;
width: 100px;
}
.header {
background-color: #F7D358;
width: 960px;
height: 100px;
position: relative;
top: 0px;
}
.maincontent {
background-color: white;
height: 100%;
margin: 0;
padding:0;
}
Easiest way in this case is to set:
.nav ul {
margin: 0;
}
I recommend you (highly) to use CSS RESET STYLE to avoid these problems.
Example: http://meyerweb.com/eric/tools/css/reset/
I have a header in my web page where logo, application name, help link and logout are shown. Logo is placed left top, logout is placed right top, help is placed before logout link. The rest of the space should be occupied by the application name. I tried to float all the divs and then my divs lost width and when I try to set width on my app name div I get unexpected results when I try to set width: 100%. Even I dont set the width to 100% if the application name text increases I get unexpected results.
This is the code
<!DOCTYPE html>
<html>
<head>
<title>Mock UI</title>
<style>
body {
margin: 0px;
}
.oss-gradient {
height: 5px;
min-width: 1024px;
background: yellow;
}
.header {
height: 40px;
min-width: 1024px;
background: #def;
}
.logo {
background-image: url("logo_top_small.png");
background-repeat: no-repeat;
background-position: center center;
background-attachment: scroll;
width: 50px;
height: 100%;
float: left;
}
.product-name {
line-height: 35px;
height: 100%;
float: left;
width: 100%;
}
.help {
line-height: 35px;
float: right;
height: 100%;
}
.logout {
line-height: 35px;
float: right;
height: 100%;
}
.content-wrapper {
width: 1024px;
background: #defabc;
margin: 0px auto;
}
</style>
</head>
<body>
<div class="container">
<div class="oss-gradient">
</div>
<div class="header">
<div class="logo">
</div>
<div class="product-name">
App name
</div>
<div class="logout">
Logout
</div>
<div class="help">
Help
</div>
</div>
<div class="content-wrapper">
</div>
</div>
</body>
</html>
Here is a working sample.
I then tried doing the same with CSS3 calc method. But this involves hard coding the widths. A small change in logo's width or logout, help divs widths will create problems in the app name div.
Click here to see the working example with css3 calc
Then I tried to do it using float with inner divs. Below is my new code
<!DOCTYPE html>
<html>
<head>
<title>Mock UI</title>
<style>
body {
margin: 0px;
}
.oss-gradient {
height: 5px;
min-width: 1024px;
background: yellow;
}
.header {
height: 40px;
min-width: 1024px;
background: #def;
}
.logo {
background-image: url("logo_top_small.png");
background-repeat: no-repeat;
background-position: center center;
background-attachment: scroll;
width: 50px;
height: 100%;
float: left;
}
.wrapper {
height: 100%;
}
.product-name {
line-height: 35px;
height: 100%;
float: left;
}
.help {
line-height: 35px;
float: right;
height: 100%;
margin-right: 10px;
}
.logout {
line-height: 35px;
float: right;
height: 100%;
margin-right: 10px;
}
.oss-text {
line-height: 35px;
height: 100%;
overflow: hidden;
}
.content-wrapper {
width: 1024px;
background: #defabc;
margin: 0px auto;
}
</style>
</head>
<body>
<div class="container">
<div class="oss-gradient">
</div>
<div class="header">
<div class="logo">
</div>
<div class="wrapper">
<div class="logout">
Logout
</div>
<div class="wrapper">
<div class="help">
Help
</div>
<div class="oss-text">
App name
</div>
</div>
</div>
</div>
<div class="content-wrapper">
</div>
</div>
</body>
</html>
Click here to see the working example.
But this is creating lot of dom. Is there any other approach or the second solution is good enough?
The first solution is a total flop.
If I use CSS3 then I have to hardcode the widths
Solution 2 involves making the dom deeper.
I think there is another solution which involves using absolute positioning. But I dont know how to do it and is it a good approach or not.
You can achieve what you want using display:table and display:table-cell:
.header {display:table}
.header > div {display:table-cell}
As long as you give widths to logo, logout and help divs then the app name should stretch to take up the rest of the header
Example
Here's what you need with only 3 div containers
The markup:
<header>
<div class='logo'></div>
<div class='appName'><h3>Some App</h3></div>
<div class='btn-container'>
<button >Help</button>
<button>Logout</button>
</div>
</header>
and the CSS:
header {
position: fixed;
top: 0px;
width: 100%;
display: table;
}
header div {
display: table-cell;
vertical-align: middle;
}
.logo {
width:40px;
background: steelblue;
height: 40px;
float: left;
}
.btn-container {
width: 80px;
float: right;
}
.appName {
text-align: center;
width: 100%;
}
Try this:
.product-name {
line-height: 35px;
height: 100%;
text-align: center;
width: 100%;
}