I can't figure out how to get the "This is the header" div's text to move down without effecting the rest of the page. When I add padding-top to the header div, it increases the entire div's size. That's not what I want. I just want to move the text down to the middle of the div.
<body>
<div id="container">
<div id="name">
<h1>Byron Woodfork</h1>
</div>
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contacts</li>
</ul>
</div><!--ends nav div-->
<div id="header">
<p>This is the header</p>
</div><!--ends header div-->
#nav {
float: right;
width: 400px;
height: 60px;
background-color: #07f50b;
}
#name {
width: 560px;
height: 60px;
float: left;
background-color: #06f706;
}
#header {
width: auto;
height: 500px;
background-color: #282e34;
}
One easy way is to set the line-height of your header div to have the same height as the div itself (so line-height: 500px). This doesn't work as nice if your text takes up more than one line, though.
Related
I'm trying to figure out how to best implement a sidebar, like the one in the new google plus
I'm using MaterializeCSS
where the "main" content of the page it's width decreases when the sidebar is open and it becomes the fullpage width when the sidebar is closed.
I'm trying to do this with the ui-router.
This is my current setup:
<header>
<div ui-view="header"></div>
</header>
<main ui-view="container"></main>
<footer>
<div ui-view="footer"></div>
</footer>
and each element has it's corresponding controller.
I was thinking of creating a new controller for the sidebar.
But I can't seem to make this work like I want:
this is what I tried:
<main>
<div class="navigation" ng-hide="shownav"><span class="flow-text">This div is 7-columns wide on pushed to the right by 5-columns.</span></div>
<div class="content" ui-view="container"></div>
</main>
css:
main {
width: 100%
}
.navigation {
width: 20%;
float: left;
}
.content {
min-width: 80%;
float: left;
}
Work with float:right and float:left, then position the footer using position: absolute with the parameters like bottom:0 and left:0to position on the bottom and left of the page, setting a width that I want.
Then mark the divs with background-colors and text to see exactly whats happening when I'm coding.
All your content wrapped inside the <main>, because it's where it's gonna the left bar and the content.
I'm sorry if I couldn't explain better
main {
width: 100%;
position: relative;
height: 100%;
}
.navigation {
width: 20%;
float: left;
background: black;
color: white;
height: 100px;
}
.content {
width: 80%;
float: right;
background: red;
color: white;
height: 100px;
}
footer {
position: absolute;
background-color: green;
color: white;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
}
<header>
<div ui-view="header"></div>
</header>
<main ui-view="container">
<main>
<div class="navigation" ng-hide="shownav"><span class="flow-text">This div is 7-columns wide on pushed to the right by 5-columns.</span>
</div>
<div class="content" ui-view="container">aaaaaa</div>
</main>
</main>
<footer>
<div ui-view="footer"></div>
</footer>
First question so sorry if this is a bit squiffy.
I'm trying to get a full (100%) width fixed header with content within, such as logo and navigation links, that is aligned to the main container. I'd like to do this without the use of margining left or right on the logo/nav content as that doesn't seem particularly flexible.
I tried putting the header div within the container block, that fixes the alignment issue but then I can no longer go full width.
So basically how do I get content in a full width fixed header to align with content in the main content of the page?
Here is my html (sorry if its messy, I've only been at this a week or so):
<body>
<div id="header">
<div id="logo">
</div>
<div id="nav">
</div>
</div>
<div id="container">
<div id="content">
</div>
</div>
<div id="footer">
</div>
</body>
Here is my CSS, I left the logo image out and in place is just a beige block:
body {
margin: 0px;
background-color: darkgray;
}
#header{
width: 100%;
height: 100px;
position: fixed;
top: 0px;
background-image: url("images/bg-header.jpg");
opacity: 0.9;
}
#logo {
height: 100%;
width: 300px;
background-color: beige;
}
#container {
width: 960px;
margin: 0px auto;
height: 1000px;
background-color:gray;
}
#footer{
width: 100%;
height: 100px;
background-image: url("images/bg-header.jpg");
}
Any advice?
Thank-you
Add an inner wrapper to your header HTML
<body>
<div id="header">
<div id="header_inner"><!-- inner div -->
<div id="logo">
</div>
<div id="nav">
</div>
</div><!-- end inner div-->
</div>
<div id="container">
<div id="content">
</div>
</div>
<div id="footer">
</div>
</body>
Then add the same width styling as your container to the wrapper:
#header_inner{
width: 960px;
margin: 0px auto;
}
Then the main content and your header content will align.
Some side notes:
classes are always better than IDs for styling
fixed width are generally not a great idea if you're going for a responsive solution
For Fixed Header or Footer you can use
.header_class {
width: 100vw;
float: left;
position: fixed !important;
top: 0px;
background: url: ('images/img.png') no-repeat;
height: 100%;
}
another better suggestion you can follow facebook header css means upper blue section css (css class name: .fixed_elem, .fixed_always)
I had a little trouble understanding what exactly you were looking to do so I made this example which shows a full page with header and one contained within the middle content area. The main problem I saw was that when you do things like width:100% it doesnt do 100% it is allowed.. but the full width of the parent element. You can use width:inherit to get the max width allowed. Here is the example with a full white header width and one contained using black. Its all in how you structure the parent child DOM relationship structure
<!doctype html>
<html>
<head>
<style>body {margin: 0px;background-color: darkgray;}
header{background-color: white;height:100px;width:100%;}
#header{width: inherit;height: 100px;position: fixed;top: 0px;background-image:url("images/bg-header.jpg");opacity: 0.9;background-color: black;}
#logo {height: 100%;width: 300px;background-color: beige;}
#container {width: 960px;margin: 0px auto;height: 1000px;background-color:gray;}
#footer{width: 100%;height: 100px;background-image: url("images/bg-header.jpg");}
</style>
</head>
<body>
<header><div></div></header>
<div id="container">
<div id="header">
<div id="logo"></div>
<div id="nav"></div>
</div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
The easiest solution is to add a container inside the #header. Create a class .container that has the properties shared by the #container and this container. Also make sure that the container inside the #header gets 100% height.
.container {
width: 960px;
margin: 0 auto;
}
#header .container {
height: 100%;
}
body {
margin: 0;
background-color: darkgray;
}
#header {
width: 100%;
height: 100px;
position: fixed;
top: 0;
background-image: url("http://placehold.it/100x100");
opacity: 0.9;
}
#logo {
height: 100%;
width: 300px;
background-color: beige;
}
#container {
height: 1000px;
background-color: gray;
}
#footer {
height: 100px;
background-image: url("http://placehold.it/100x100");
}
.container {
width: 960px;
margin: 0 auto;
}
#header .container {
height: 100%;
}
<div id="header">
<div class="container">
<div id="logo">
</div>
<div id="nav">
</div>
</div>
</div>
<div id="container" class="container">
<div id="content">
</div>
</div>
<div id="footer">
</div>
Basically you want to have a full width 100px header and footer which are fixed to top 0 and bottom 0. but at the same time you want the content to not exactly roll under the header and footer. I hope I understood the question here.
To achieve that obviously give position fixed to header and footer but now to get your content aligned right, you have to give a margin of the height of header and footer ( 100px)
Here is the code snippet... I have added different colors and some filler content to see the difference.
body {
margin: 0px;
background-color: darkgray;
}
#header,
#footer {
width: 100%;
height: 100px;
position: fixed;
left: 0;
background: blue;
opacity: 0.5;
text-align: center;
color: red;
}
#header {
top: 0;
}
#footer {
bottom: 0;
}
#logo {
height: 100%;
width: 300px;
background-color: beige;
float: left;
}
#nav {
height: 100%;
width: 450px;
background: cyan;
opacity: 0.5;
float: right;
}
#container {
width: 960px;
margin: 100px auto;
height: 1000px;
background-color: orange;
}
<div id="header">
<div id="logo">logo</div>
<div id="nav">nav</div>
</div>
<div id="container">
<div id="content">
content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>
</div>
</div>
<div id="footer">footer</div>
Hope this was what you were looking for.
I've had this problem many times before, where you want full width images, but they're in containers at a fixed width. At any rate there's a few things you can do here. You can add a container class to every section you want in a container; You put a mini-container in divs you want to break the rules, (this also requires taking said div / #header out of the main #container)
#header {
width: 100%;
height: 100px;
position: fixed;
top: 0px;
background-image: url("images/bg-header.jpg");
opacity: 0.9;
}
Than put a div inside of that called content, and set content up like this.
.content {
width: 960px;
margin:0 auto;
display:block;
}
So your markup/html should look like
<div id="header">
<div class="content">
<ul>
<li><a>Home</a></li>
<li><a>Other</a></li>
</ul>
</div>
</div>
There are more options, but these seem to make sense for this issue.
Hope This Helps,
-Alex
On the following jsfiddle:
http://jsfiddle.net/oshirowanen/4fgkj/
Here is a snippet of the HTML as it would have been too much HTML to post up here if I posted the whole thing:
<div id="main">
<div class="inner">
<ul class="column">
<li class="one">
<ul>
<li>SIDE MENU</li>
<li>SIDE MENU</li>
<li>SIDE MENU</li>
</ul>
</li>
<li class="two">
<ul>
<li class="main_content">
<p>content goes here</p>
</li>
</ul>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
You will see that I have a menu and some content. The problem is that I don't want the content to wrap around the menu.
How do I stop that from happening?
First of all, don't use li for content, it's only used for displaying lists (such as menus).
Second - to answer your question - a structure like this might do what you want, and is quite regularly used:
HTML:
<div class="wrapper">
<div class="header">
header
</div>
<div class="wrapright">
<div class="right">
right
</div>
</div>
<div class="left">
left
</div>
<div class="footer">
footer
</div>
</div>
CSS:
.wrapper{
width: 90%;
margin: 0 auto;
}
.header{
float: left;
width: 100%;
background-color: #f4f4f4
}
.wrapright{
float: left;
width: 100%;
background-color: #cfcfcf
}
.right{
margin-left: 220px;
background-color: #afeeee;
height: 200px;
}
.left{
float: left;
width: 200px;
margin-left: -100%;
background-color: #98fb98;
height: 200px;
}
.footer{
float: left;
width: 100%;
background-color: #f4f4f4;
}
body {
padding: 0px;
margin: 0px;
}
LIVE DEMO
Of course, you'll have to adjust the CSS to change background colour, padding,... and the HTML to adjust the content. But I think you'll be able to figure that out.
Well, don't tell it to wrap around... in :
#main .column .one {
padding:10px 10px 10px 0px;
float:left;
}
just remove the line
float:left;
You have to set min-height to your css rules (#main .column .one). If you set it, your content will be right the menu, but will not be wrapped around it.
#main .column .one {
padding:10px 10px 10px 0px;
float:left;
min-height:600px;
}
All you need to do is add this to your styles:
.main_content {overflow: hidden;}
However, I must say, using a ul for page layout like that is not a good idea. Semantically, your page content is not an unordered list.
I have a couple of classes there so let me post them first.
HTML:
<div class="content">
<div class="sidebar">
</div>
<div class="area">
</div>
</div><!-- content closed -->
CSS:
.content {
background-color: #eee;
height: auto;
}
.sidebar {
background-color: #555;
width: 250px;
height: auto;
padding: 10px;
float: right;
}
.area {
background-color: #777;
width: 590px;
height: auto;
padding: 10px;
}
So, you can basically see that every single class have height set on "auto". Thats good cause I want content to follow sidebar and area. And they will have plenty of content inside of them.
Now...
.sidebar is set on float:right; so it doesnt really affect to move the content that stands below. Which is footer in my case.
I am wondering how to make the object thats floating, to move the parts that are below of it, depending on auto set height.
I'm not sure I understand your question, but if you are trying to position footer underneath your content that is floated right, you need to clear the float:
<div class="content">
<div class="sidebar">
</div>
<div class="area">
</div>
<div style="clear:both"></div>
This is the footer
</div><!-- content closed -->
Jsfiddle: http://jsfiddle.net/xmw7M/1/
i'm attempting to create an header which is divided into 3 divs
they will all be set to display: inline-block
the left header part will contain a slogan and a logo which i wan't the slogan to be at
the right of the logo
the problem is my logo div and my slogan div are always placed one on top of the other .
to my understanding an inline element would be placed next to the last inline element
with in the same block , notice that the header-left div has 250px width and each of the
child div's have 100px width so why are they not placed one next to the other ?
my markup :
<div id="header">
<div id="header-left">
<div id="logo" />
<div id="slogan">
<span> Buy For U</span>
</div>
</div>
</div>
my css :
div#header
{
border: 1px solid black ;
height: 200px;
}
div#header div#header-left
{
display: inline-block;
height: 100%;
width: 250px;
}
div#header div#header-left div#logo
{
display: inline-block;
background: url("Google-Desktop-64.png") no-repeat center;
background-size: 25%;
height: inherit;
width: 100px;
}
div#header div#header-left div#slogan
{
display: inline-block;
height: inherit;
width:100px;
}
everything's fine. just close the logo's <div> properly. "self-closing" tags.
<div id="header">
<div id="header-left">
<div id="logo"></div>
<div id="slogan">
<span> Buy For U</span>
</div>
</div>
</div>
i also suggest using an <img> for the logo (and make it a link to homepage) rather than just a background. empty <div> tags are prone to errors during validation.
It is stange that your #header has a width of 200 pixels and the child #header-left 250 pixels, but apart from that I think it's better to use a float. This means that the two divs are next to each other:
div#header div#header-left div#logo
{
float: left;
background: url("Google-Desktop-64.png") no-repeat center;
background-size: 25%;
height: inherit;
width: 100px;
}
div#header div#header-left div#slogan
{
float: left;
height: inherit;
width:100px;
}
And you nead a clear in your html/css:
.clear_left { clear: left; }
And the html:
<div id="header">
<div id="header-left">
<div id="logo" />
<div id="slogan"><span> Buy For U</span></div>
<div class="clear_left"></div>
</div>
</div>