I have HTML
<div class="mainwraper" style="width:100%;">
<div class="header1">
div logo left <img src="logo"> // - it sends it pasted to the left sidebar
div class right // it send it pasted to the right sidebar
</div> // need to center them in the page and keep the repeative effect
<div class="header2" style="width:100%;">
<div class="headbar">
<ul class="menu" style="background:#0099CC;"> … </ul>
</div>
</div>
</div>
CSS
.mainwraper {
margin:0 auto;
}
.header1 {
float:left; width:100%; height:78px; margin-top: 10px;
}
.header2 {
float:left;
width:100%;
position:relative;
z-index:auto;
height:52px;
margin-top:20px;
background: #000;
opacity: 0.65;
border-radius: 10px;
}
.headbar {
background-color: inherit;
float: left;
list-style-type: none;
margin: 0 auto;
padding: 0;
position: relative;
width: 100%;
border-radius: 10px;
}
.menu {
background-color: inherit;
background-image:url(images/menugradient.png);
float: left;
list-style-type: none;
margin: 0 auto;
padding: 0;
position: relative;
width: 100%;
}
I want it to look like this [1]: http://postimg.org/image/hi7knv1tp/ "tooltip"
but it looks something like this [2]: http://postimg.org/image/ptqdhlfyv/ |tooltip".
I also want to mention that after i have another Div class main wrapper of 972px that is centered correctly.
you can use margin:0 auto; to center your navigation
Related
I have a menu bar and it consists of two divs. In the end it looks like only a single menu bar. And I need this menu bar to be fixed on top when I scroll down the page.
My HTML code:
<div id="body">
<header id="header">
<div class="inner">
<div id="topmenu">
Login
</div>
<div id="social" class="icons">
<span>Twitter</span>
<span>Facebook</span>
<span>Linked In</span>
</div>
</div>
</header>
</div>
And my CSS:
#header .inner #topmenu {
float: right;
width: 50%;
height: 30px;
background-color: #5f5f5f;
}
#header .inner #topmenu .login {
text-decoration: none;
float: right;
background:url('images/loginlink.png') no-repeat 40px 12px;
padding-right: 20px;
padding-top: 5px;
color: white;
}
#header .inner .icons {
float: left;
width: 50%;
height: 30px;
background-color: #5f5f5f;
}
#header .inner .icons .twitter span {
display: none;
}
#header .inner .icons .twitter {
width: 20px;
height: 20px;
display: inline-block;
background:url('images/i_twitter.png') no-repeat center center;
padding-top: 10px;
padding-left: 10px;
}
Note: I need to have this menu bar "broken" into two parts like this. I cannot modify HTML, I'm able to modify only the CSS file.
Link to example.
Is there any solution how to fix that without using JavaScript?
You can set .inner with position:fixed;top:0
#header .inner{
width:100%;
position:fixed;
top:0px;
}
Example
I am trying to get the "ChatBox" to float to the right side of the <main> tag, opposite side of Box1 and NavBox.
If I remove either Box1 or NavBox then it works. Otherwise I can only get it to the bottom of the page (when "ChatBox" is after the <main> tag), or to the right (when before the <main> tag), but it won't go to the top of the <main> box, it will start about 200px down.
The only HTML that can be changed is to move "ChatBox" about the <main> tag. Mostly has to done using CSS only.
http://jsfiddle.net/8em3m60m/26/
CSS
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
body {
background:#000;
font:normal 11px/13px Arial, Verdana, Lucida, Helvetica, sans-serif;
color:#c2c2bd;
}
#wrapper {
clear:left;
max-width:999px;
min-height:100%;
margin:0 auto;
border:0;
text-align:left;
}
.mainnav, .box-1 {
float:left;
clear: left;
vertical-align:top;
width:180px;
height:200px;
margin: 18px 0 0 8px;
}
.chatbox {
float:right;
vertical-align:top;
width:196px;
min-height:200px;
}
.main {
min-height:550px;
padding-top: 40px;
background: #7d7e7d;
margin-top:100px;
}
.main-1{
width: 548px;
margin-left:194px;
min-height:250px;
background-color: #3f3f3f;
padding:6px;
}
HTML
<div id="wrapper">
<div id="box-1" class="nav box-1">Box 1</div>
<nav id="navbar" class="nav mainnav">NavBox</nav>
<main id="main" class="main" role="main">
<div class="main-1">Main Content</div>
</main>
<div id="chatbox" class="chatbox">ChatBox</div>
</div>
EDIT: The only possible HTML change I can make is to move the ChatBox above, or below, the <main> tag.
Using Absolute Positioning
If you want to keep the HTML as you presented, you can use absolute positioning as follows.
You need to apply position: relative to #wrapper and then use suitable top and right offsets for .chatbox.
You need to specify a width or min-width to the wrapper or else you will get
some overlapping with the absolutely positioned element.
This solution may work but it depends on your other requirements regarding flexibility and responsiveness.
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
body {
background: #000;
font: normal 11px/13px Arial, Verdana, Lucida, Helvetica, sans-serif;
color: #c2c2bd;
}
#wrapper {
clear: left;
width: 999px;
min-height: 100%;
margin: 0 auto;
border: 0;
text-align: left;
position: relative;
}
.mainnav,
.box-1 {
float: left;
clear: left;
vertical-align: top;
width: 180px;
height: 200px;
margin: 18px 0 0 8px;
outline: 1px dotted yellow;
}
.chatbox {
vertical-align: top;
width: 196px;
min-height: 200px;
outline: 1px dotted yellow;
position: absolute;
right: 8px;
top: 18px;
}
.main {
min-height: 550px;
padding-top: 40px;
background: #7d7e7d;
margin-top: 100px;
outline: 1px dashed yellow;
}
.main-1 {
width: 548px;
margin-left: 194px;
min-height: 250px;
background-color: #3f3f3f;
padding: 6px;
}
<div id="wrapper">
<div id="box-1" class="nav box-1">Box 1</div>
<nav id="navbar" class="nav mainnav">NavBox</nav>
<main id="main" class="main" role="main">
<div class="main-1">Main Content</div>
</main>
<div id="chatbox" class="chatbox">ChatBox</div>
</div>
Without restructuring your HTML (which I would strongly suggest; it's a little unsemantic and nonsensical), you can achieve what you're looking for this way:
JSFiddle Example
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
body {
background:#000;
font:normal 11px/13px Arial, Verdana, Lucida, Helvetica, sans-serif;
color:#c2c2bd;
}
#wrapper {
max-width: 999px;
min-height: 100%;
margin: 0 auto;
}
.box-1, .mainnav {
float: left;
clear: left;
width: 180px;
height:200px;
vertical-align:top;
margin: 18px 0 0 8px;
}
.chatbox {
float:right;
position: relative;
top: -200px;
vertical-align:top;
width:196px;
min-height:200px;
}
.main {
min-height: 550px;
padding-top: 40px;
background: #7d7e7d;
margin-top: 100px;
}
.main-1 {
width: 548px;
margin-left: 194px;
min-height: 250px;
background: #3f3f3f;
padding: 6px;
}
<div id="wrapper">
<div id="box-1" class="nav box-1">Box 1</div>
<nav id="navbar" class="nav mainnav">NavBox</nav>
<div id="chatbox" class="chatbox">ChatBox</div>
<main id="main" class="main" role="main">
<div class="main-1">Main Content</div>
</main>
</div>
I've moved your .chatbox element above .main, and have given it position: relative; and moved it 200px above the top position of where it would normally be, so that it is in line with Box 1. A better way to do this that doesn't require the position property would be to wrap .box-1 and .nav in a containing element, float the containing element left, and then move the .chatbox element above the .main element and float it right.
I usually would have used position:absolute for having the chatbox align on the right at the top. Your CSS would be;
.chatbox {
position:absolute;
top: 0;
right: 0;
width:196px;
min-height:200px;
}
This will align it to the top-right of the parent element of the chatbox.
I want the div "nav" to be floated right and display its divs inline. Also when I resize the browser I want "nav" to slide under "logo" and do so not having divs left on the same line as the logo while other underneath the logo.
Here is the HTML:
<div id="header-container">
<div id="header-wrap">
<div class="left logo logoimg">
<img src="images/Logo-Robert_Fikes_IV.png"/>
</div>
<div class="right nav">
<div class="bluebutton">PORTFOLIO</div>
<div class="bluebutton">PORTFOLIO</div>
<div class="bluebutton">PORTFOLIO</div>
</div>
</div>
</div>
and CSS:
body {
background: #000000;
margin: 0;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #FFFFFF;
}
img {
max-width: 100%;
}
.left {
float: left;
}
.right {
float: right;
}
#header-container{
margin: auto;
padding: 80px 0px 0px;
max-width: 1160px;
width: 100%;
height: 200px;
}
#header-wrap{
padding: 0px 40px 0px;
max-height: 100%;
}
.logo{
max-width: 440px;
width: 100%;
}
.logoimg{
}
.nav{
margin-top: 20px;
}
.bluebutton{
color: #00bff3;
border: 1px solid #00bff3;
padding: 8px 8px 8px;
margin: 0px 0px 0px 5px;
}
http://jsfiddle.net/wse63zzk/
Done. I changed the nav divs to li elements, and of course the parent div to a ul. This is really how you should be making navigation menus for semantic HTML.
Then I just added the following CSS:
.nav {
margin-top: 20px;
list-style-type:none;
}
.right.nav li {
float:right;
}
Fiddle
I've been trying to find a solution to this for days, but haven't found anything that works.
I thought I'd finally make an account on this great website, so here goes:
I am trying to have a div expand from left to right, with 170px of clearance on both sides.
However, when there is no content on the page, or only a few words, the div doesn't expand.
I've tried to add width: 100% in several different divs to try and have them take up the full space, but that either does nothing, or completely busts the page layout. for example, instead of filling out the page, the div that's supposed to hold the content moves off the right side of the screen, and also doesn't leave the 170px margin.
I hope you can be of help, my code is posted below:
Thanks in advance,
Chris
the html:
<html>
<body>
<div id="wrapper">
<div id="pagetopwrap">
</div>
<div id="pagemainliquid">
<div id="pagemainwrap">
<div id="content">
<div id="headerwrap">
<div id="header_left">
</div>
<div id="header_main">
<div id="logo_row">
<p id="logotext">Site Title</p>
</div>
<div id="menu_row">
<!-- irrelevant menu button code -->
</div>
</div>
<div id="header_right">
</div>
</div>
<div id="contentbody">
<div id="contenttext">
<p id="contenttextmakeup">Lorum Ipsum Dolor Sit Amet</p>
</div>
</div>
</div>
</div>
</div>
<div id="leftcolumnwrap">
<div id="leftcolumn">
</div>
</div>
<div id="rightcolumnwrap">
<div id="rightcolumn">
</div>
</div>
<div id="footerwrap">
<div id="footer">
</div>
</div>
</div>
</body>
</html>
the css:
It is not ordered too well, the uninteresting sides, top and footer are first, and the main part of the website at the bottom
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
background-color: #0f0f0f; /* is normally an image */
}
#wrapper {
width: 100%;
min-width: 960px;
max-width: 1920px;
margin: 0 auto;
height: 100%
}
#pagetopwrap {
height: 50px;
width: 100%;
float: left;
margin: 0 auto;
}
#pagemainliquid {
float: left;
}
#pagemainwrap {
margin-left: 170px;
margin-right: 170px;
float: left;
}
#leftcolumnwrap {
width: 170px;
margin-left:-100%;
float: left;
}
#leftcolumn {
margin: 5px;
}
#rightcolumnwrap {
width: 170px;
margin-left: -150px;
float: left;
}
#rightcolumn {
margin: 5px;
}
#footerwrap {
width: 100%;
float: left;
margin: 0 auto;
clear: both;
bottom:50px;
}
#footer {
height: 0px;
margin: 5px;
}
#headerwrap {
width: 100%;
margin: 0 auto;
}
#header_left {
background-color: #ff0000; /* is normally an image */
width:25px;
height:200px;
float:left;
}
#header_right {
background-color: #ff0000; /* is normally an image */
width:25px;
height:200px;
margin-left: 0px;
float:right;
position:relative; top:-200px;
}
#header_main {
background-color: #00ff00; /* is normally an image */
margin-left: 25px;
margin-right: 25px;
height:200px;
background-size: 100% 200px;
}
#contentbody {
background-color: #E2E2E2;
border-radius: 10px;
margin-top:10px;
border: 1px solid #A7A7B2;
}
#contenttext {
margin-left:10px;
margin-right:10px;
}
#logo_row {
height:150px;
width:100%;
float:left;
}
#logotext {
margin-top:20px;
margin-left:10px;
vertical-align: middle;
font-size: 55px;
font-family: "Arial Black", Arial;
}
#contenttextmakeup {
margin-top:12px;
margin-left:10px;
vertical-align: middle;
}
#menu_row {
width:100%;
}
button.menubutton {
/* irrelevant button markup */
}
http://jsfiddle.net/w9qLh6tp/ if that helps, I've seen it a lot around here :)
Instead of using !important, save yourself a headache in figuring out why important works.
CSS = cascading style sheets. You have a selector with more specificity which is why your width property isnt changing. Figuring out the route of the problem will save you time in the future when this happens again (and it will)
For example, if I styled something like so
#container .red { width: 50% }
updating the style using .red without the #container in front of it has less specificity. So if they are both modifying the same property, the one with more prevalence will take effect. This is true for media queries as well.
Fixed here http://jsfiddle.net/w9qLh6tp/1/
#pagemainwrap {
margin-left: 170px;
margin-right: 170px;
float: left;
width: 100% !important; // set it highest priority
border: 3px red solid; // border is set just for demonstration
}
set the width to be 100% with priority (!important) that will override any other css styling.
My current page is leaving small blank area near footer. Not sure what causing the problem. Below is my code:
<link rel="stylesheet" type="text/css" href="style/test_style.css">
<body>
<div id="header">
</div>
<div id="navigation">
<ul>
<li>test</li>
</ul>
</div>
<div id="main">
<div id="sidebar">
this is a test
</div>
</div>
<div id="footer"></div>
</body>
test_style.css:
body {
margin: 0; }
#header {
text-align: left;
margin: 0 auto;
height: 50px;
background: #ccccff; }
#header h1 {
margin: 0;
padding: 1em; }
#main {
margin: 0;
padding: 0;
float: top;
height: 700px;
width: 100%;
background: #009999; }
#sidebar {
float: left;
height: 100%;
width: 150px;
background: #999900;
}
#footer {
clear: left;
margin: 0 auto;
height: 50px;
background-color: #666600;
padding: 20px; }
#navigation {
float: left;
width: 100%;
background: #333; }
#navigation ul {
margin: auto;
padding: 0; }
#navigation ul li {
list-style-type: none;
display: inline; }
#navigation li a {
display: block;
float: right;
color: #ffff99;
text-decoration: none;
border-left: 1px solid #fff;
padding: 5px; }
#navigation li a:hover {background: #383}
There are two options:
1) Change float: top; to float: left; for #main:
#main {
margin: 0;
padding: 0;
float: left;
height: 700px;
width: 100%;
background: #009999;
}
2) Add clear: both; to #main:
#main {
clear: both;
}
The reason it isn't working as you have it, is that you've floated the element within #main (the #sidebar) to the left, which sort of messes up the structure of the #main div. That means that #sidebar is placed just below the element above (#navigation) while #main is placed at the very top of the page (behind #navigation, so the top is not visible) causing it to not come down as far as the #sidebar div.
Just to exemplify: Another way to do it would be to add the height of #navigation (which in my browser is 28px) to the padding of #main, so:
#main {
padding-bottom: 28px;
}
Add float:left; to your #main
#main {
float:left;
margin: 0;
padding: 0;
float: top;
height: 700px;
width: 100%;
background: #009999; }
Please see: http://jsfiddle.net/cNZ46/1/
Here (link) is a fixed code with both HTML and CSS changes.
Notice that I moved #sidebar out from the #main so that they're apart from each other. Also I changed footer's clear to both which fixed the whitespace above it.
<div id="main">
<p>Main content here!</p>
</div>
<div id="sidebar">
<p>Sidebar here!</p>
</div>
I've set up a min-height to both, sidebar and main area, just to show you it works.