I have problem with creating a webpage menu - I must do something like in this picture below. This black parts is just a background around content in the middle. I want to make this left black part is extended to the left side of screen and right black part extended to right side of screen, but I can't use width:100% on the outer div because I want to leave a empty spaces between every red square.
…and on the wider screen this must be like this:
It is indeed.
Codepen Demo
HTML
<header>
<div class="inner"></div>
</header>
CSS
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
overflow:hidden; /* prevent scrollbar */
}
header {
position: relative;
}
.inner {
height:100px;
width:980px;
margin:0 auto;
border:1px solid black;
}
header:before, header:after {
content: "";
position: absolute;
background-color: lightblue;
top: 0;
bottom:0;
width:50%;
}
header:before {
left:0;
margin-left:-490px;
}
header:after {
right:0;
margin-right:-490px;
}
Edited
I have updated the code as per your comment, there was a slight error, and I have removed it. check out this new link
http://jsfiddle.net/24eDx/1/
As far as I understand your question, you want to create menu bar which will be aligned center, and which looks like the one you http://i.imgur.com/s6keh9f.jpg
I have created one JSFiddle for you
http://jsfiddle.net/24eDx/
HTML:
<div class="header">
<div class="header-wraper">
<div>
<ul class="menu">
<li><div class="menu-li">Menu 1</div> </li>
<li><div class="menu-li">Menu 2</div> </li>
<li><div class="menu-li">Menu 3</div> </li>
<li><div class="menu-li">Menu 4</div> </li>
</ul>
</div>
</div>
</div>
CSS:
.header{
background : black;
height:50px;
width:100%;
}
.header-wraper
{
width : 80%;
margin:0 auto;
}
.header .header-wraper .menu li
{
list-style: none;
background: red;
float: left;
padding: 16px 14px;
border: 2px solid #FFF;
border-width: 0 1px;
}
.header .header-wraper .menu li:first-child
{
border-width: 0 1px 0 2px;
}
.header .header-wraper .menu li:last-child
{
border-width: 0 2px 0 1px;
}
P.S. : Please, Next time do add a code you working on, that will be helpful for everyone and Also read the documentation that will help you understand how to ask a question on stack overflow.
Related
I have a blank HTML page and I want to align 2 elements...Vertically and Horizontally. These elements are a <img> tag, a <p> tag for text, and 2 <div> tags for containing those elements...
When I resize my window I don't want these elements to be cut-off by my browser. After countless hours of trying to figure this out, and searching Stack and various other websites...I came close, but I could never get it 100% like I want it...
There's this white-space at the bottom and the ride side of the bordered second div near the text, and the culprit appears to be the <p>. When I get rid of the tag the white-space goes away. However, I want the text under the image so I need it...
The white-space is making me question whether the content is placed in the center or not. How can I get rid of it?
HTML
<body>
<div id="container">
<div id="content">
<p>
<img src="http://www.iconsdb.com/icons/preview/blue/square-xxl.png" alt="Under Construction">
<br> UNDER CONSTRUCTION!
</p>
</div>
</div>
</body>
CSS
body
{
margin:0;
background-color: seagreen;
}
#container
{
position:relative;
height:100%;
width:100%;
min-width:400px;
}
#content
{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
outline:3px solid red;
}
#content p
{
margin:0;
text-align:center;
font-family:Courier;
font-size:48px;
white-space:nowrap;
color:springgreen;
}
I changed you HTML to enclose your text in a span tag and removed the br:
<body>
<div id="container">
<div id="content">
<p>
<img src="http://www.iconsdb.com/icons/preview/blue/square-xxl.png" alt="Under Construction">
<span>UNDER CONSTRUCTION!</span>
</p>
</div>
</div>
</body>
Then I added this to your CSS. It styles the enclosing span as a block, so you don't need to <br> tag in your HTML. It also uses line-height to adjust spacing above and below the line of text.
#content span {
display: block;
margin: 0;
line-height: .8;
}
And removed the position attribute from here:
#container
{
/*position:relative;*/ /* Removed */
height:100%;
width:100%;
min-width:400px;
}
Here is a sample fiddle
UPDATE
It appears the reason why you are seeing white-space still on Firefox is that you are using outline instead of border on your CSS for #content.
I don't know exactly why Firefox is rendering the outline differently. But if you change your CSS for #content to the following, you'll get the same result on Chrome, Firefox, Edge and IE (11).:
#content
{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
/*outline:3px solid red;*/
border: 3px solid red;
}
Here is the updated fiddle
I have gone through your code . i have made some changes in above given code . I hope this gone be helpful to you.
CSS
body
{
margin:0;
background-color: seagreen;
}
img{
display: block;
margin: auto;
width: 50%;
}
/* add this css to remove the white space under text */
p
{
margin-bottom: -9px !important;
}
#container
{
position:relative;
height:100%;
width:100%;
min-width:400px;
}
#content
{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
outline:3px solid red;
margin-top: 200px;
padding-top: 10px;
}
#content p
{
margin:0;
text-align:center;
font-family:Courier;
font-size:48px;
white-space:nowrap;
color:springgreen;
}
<div id="container">
<div id="content">
<img src="http://spectrumapartments.com.au/wp-content/themes/spectrumapartments/img/building/red-squares.png" alt="Under Construction">
<br>
<p>UNDER CONSTRUCTION!</p>
</div>
</div>
I GAVE IT ANOTHER TRY, HOPEFULLY THIS WILL SOLVE IT FOR YOU. YOU SOUND VERY DESPERATE.
*{
border: 0;
margin: 0;
margin: 0;
}
.container {
font-size: 0;
}
.container span {
font-size: 35px;
background: #ff8ea1;
padding: 0;
margin: 0;
}
.container span.no-space {
display: inline-block;
vertical-align: top;
height: .75em;
line-height: .75em;
}
<div class="container">
<span>Under Construction</span>
<div style="height: 20px;"></div>
<span class="no-space">Under Construction</span>
</div>
TRY THIS ONE!
Similar to http://m.huffpost.com/us topbar
Edit: I am trying to create a "responsive menu"
ICON (left aligned) and some TEXT that's centered in a bar at the top
My attempt obviously doesnt work:
<div style="float:left" ><i class="fa fa-bars"></i> </div>
<center>Centered Text</center>
my menu-trigger class is :
.menu-trigger {
position: relative;
padding-left: 60px;
font-size: 1.5em;
}
Any help would be appreciated!
There are multiple soutions to the problem. Here's one with the most simple markup:
HTML
<div>
<a>Menu</a>
<h1>HELLO</h1>
</div>
The div is actually not needed necessarily. Here it is used to make a full background color.
CSS
h1 {
margin: 0 0 0 80px;
text-align: center;
}
a {
float: right;
width: 80px;
}
Demo
Try before buy
It also works with a menu on the left
You can try something like this. Here you have a top bar center aligned and 2 icon links left aligned (50% width as in original link that you posted):
HTML:
<div class="menu top">Link</div>
<div class="menu icon"><img src="" />Link</div>
<div class="menu icon"><img src="" />Link</div>
CSS:
.menu {
display:inline-block;
border:1px solid #333;
background-color:#ddd;
padding:10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-right:-4px;
}
.menu>a {
color:#000;
text-decoration:none;
}
.top {
width:100%;
text-align:center;
}
.icon {
width:50%;
}
.icon>a {
padding-left:10px;
}
.icon>img {
display:inline-block;
border:1px solid red;
width:30px;
height:30px;
}
Here's the Fiddle. Hope it helps.
I am trying to make the sidebar fill the height between the header and foot. As you can see it is going behind the footer. I would like it to stop at the top of the footer. Any help would be great!
Demo at: http://www.jsfiddle.net/pEbhK/
The HTML:
<div class="header">
<h2>Development Area</h2>
</div>
<div class="sidebar">
<h2>Current Projects</h2>
<ul>
<li>iCalendar</li>
<li>MyBand - Student Center</li>
</ul>
<h2>Future Projects</h2>
<ul>
<li>Mobile Application</li>
<li>RSS Feed</li>
</ul>
</div>
<div class="clear"></div>
<div class="footer">© 2013</div>
The CSS:
html, body, h1, h2 {
margin:0px;
padding:0px;
}
.clear {
clear:both;
}
.header {
display:inline-block;
width:100%;
background:#ABBFF2;
height:100px;
border-bottom: 5px solid #7F9DEB;
text-align:center;
}
.header h2 {
padding-top:38px;
}
.sidebar {
position: fixed;
height:100%;
width:250px;
background:#ABBFF2;
border-right:5px solid #7F9DEB;
float:left;
}
.sidebar h2 {
text-align:center;
}
.footer {
position:fixed;
display:inline-block;
bottom:0px;
width:100%;
height:30px;
border-top:5px solid #7f9deb;
text-align:center;
}
Try height:calc(100% - 140px) in .sidebar
.sidebar {
position: fixed;
height:calc(100% - 140px);
width:250px;
background:#ABBFF2;
border-right:5px solid #7F9DEB;
float:left;
}
updated jsFiddle File
A non-calc() way of doing this...
Your sidebar and footed have position: fixed, so they are positioned with respect to the view port.
You can size the sidebar using the following CSS:
.sidebar {
position: fixed;
top: 105px;
bottom: 35px;
left: 0px;
width:250px;
background:#ABBFF2;
border-right:5px solid #7F9DEB;
}
The value for the top offset is the header height + 5px for the border. Likewise, the bottom offset is the footer height + 5px for its border.
See demo at: http://jsfiddle.net/audetwebdesign/Lfpxq/
Note: You may want to add a min-height to the sidebar to prevent the content overflow issues. I think the same issue arises when using the calc() method.
Or write this to .footer in the css
background-color: #fff;
How do you separate the menu bar from the body in a div, to place everything after contact below it, is there a corresponding code like a newline? I would really appreciate the help :) Thanks in advance
here's a link of picture shot:
CSS
/* because of the * default code it takes out all margin and padding */
* {
margin: 0px;
padding: 0px;
}
#container {
display: table;
}
#row {
display: table-row;
}
#left, #right, #middle {
display: table-cell;
}
#row {
display: table-row;
}
#left, #right, #middle {
display: table-cell;
}
body {
font-family: verdana;
font-size: 10px;
background-color: ABC;
padding: 50px;
margin: auto;
}
h1 {
text-align: center;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
float: left;
position: relative;
}
li + li {
border-left: 1px solid #ccc;
}
a {
display: block;
padding: 7px 10px;
color: #222; /*changes the color of all item font color in menu bar */
background: #eee; /*changes the background color of Menu bar */
text-decoration: none;
}
a:hover {
color: #fff;
background: #666; /* changes hover bg color of any menu item being pointed*/
}
a:active {
color: #f2f75e;
background: #0090cf;
}
/* Child Menu Styles */
.level-two {
position: absolute;
top: 100%;
left: -9999px;
width: 100px;
}
li:hover .level-two {
left: 0;
}
.level-two li {
width: 100%;
border: 0;
border-top: 1px solid #ccc;
}
HTML
<h1>
<ul class="level-one">
<li> Home </li>
<li> Drops
<ul class="level-two">
<li> One </li>
<li> Two </li>
<li> Three </li>
</ul>
</li>
<li> Contact </li>
</ul>
</div>
<div id="container">
<div id="row">
<div id="left">
<h4>Left Col</h4>
<p>...</p>
</div>
<div id="middle">
<h4>Middle Col</h4>
<p>...</p>
</div>
<div id="right">
<h4>Right Col</h4>
<p>...</p>
</div>
</div>
</div>
</h1>
add clearfix class on both of .
DEMO
.clearfix{
clear:both;
}
DEMO1
One alternative to the clear property is to trigger a new block formatting context on the menu in order to contain the floats inside .level-one :
.level-one {
/* trigger block formatting context to contain floats. */
overflow: hidden;
}
Demo at http://jsfiddle.net/mrYdV/1/
Here is a list of other property/value pairs that trigger block formatting context
W3C specification
Bulletproof backwards-compatible version
There is a great answer with more details covering this method at How does the CSS Block Formatting Context work?
The clear property will do this for you. You can add it to your #container for example:
#container {
display: table;
clear:both;
}
Clear means something like:
clear all elements on both sides of this element
I have "Awkward Showcase" running in my page, but above I have a dropdown menu. The thing is that the showcase overlaps the menu and it is not completely visible.
I could correct that changing z-index, but it only works when I put:
negative Index to Awkward Showcase
positive index to DropDown Menu
Because of this, as the showcase has arrows to navigate trough sliders, there is no way to click on each. It seems like they (arrows) arre behind a transparent layer, because they arre visible, but inactive.
My codes:
Menu
<div id="navmenucontainer">
<ul id="navmenu">
<li class="main" onclick="javascript: Mostrar(this);" id="menitem1">Productores
<div class="sub" onmouseout="setTimeout('Cierro(this)', 1000);" onmouseover="Sigue(this);" style="width:204px; overflow:hidden;">
Some menu items
</div>
</li>
</ul>
</div>
Slideshow
<div id="showcase" class="showcase">
<div class="showcase-slide">
<div class="showcase-content">
<div class="showcase-content-wrapper">
<img src="images/1.jpg">
</div>
</div>
<div class="showcase-caption">
</div>
</div>
CSS
#navmenucontainer {
z-index:999999;
}
*/ul#navmenu div.sub{
display: none;
background: url('images/menu/bgcat.png') repeat-x bottom #FFF;
position: absolute;
top:26;
left:0;
vertical-align:top;
padding-top:0;
padding-bottom: 22px;
width:1240px;
/*border-right:1px solid silver;*/
border:1px solid silver;
z-index:99999;
zoom:1;
}
ul#navmenu li {
margin: 0;
/*border: 0 none;*/
padding: 0;
float:left; /*For Gecko*/
display: inline;
list-style: none;
height: 20px;
}
ul#navmenu ul {
margin: 0;
padding: 0;
float:left;
width:100%;
}
.showcase
{
position: relative;
z-index:-1;
margin: 0;
}
The overlapping occurs with ".sub" div, and ".showcase".
This is a longshot, but since it is IE after all... It could be either (almost)correct or disaster.. I have encountered the same problem, and it is a different solution every time depending on ones luck.. (IE sucks, just to quote and agree on the earlier comments)
Add this to your html
<!--[if IE]>
<style type="text/css">
#navmenucontainer {
z-index:3000;
}
ul#navmenu {
z-index:2000;
}
ul#navmenu div.sub {
z-index:1000;
}
.showcase {
position: relative;
z-index:0;
margin: 0;
}
</style>
<![endif]-->
Inspired from http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/