I'm currently doing a bit of a redesign on my site and have run into a slight issue regarding a header div element and some child elements with a float: attribute.
My header is showing a height value of 0, and not calculating the contents itself correctly. I've done a bit of reading around and I understand that this is most likely down to floating elements within the navigation (in this case .desktoplinkitem).
My header code is as follows:
<div class="header videohead">
<div class="mobile-nav">
<div class="mobile-link-container">
<div class="mobile-links">
<li class="linkitem">Video</li>
<li class="linkitem">Stills</li>
<li class="linkitem">About</li>
<li class="linkitem">Contact</li> </div>
</div>
</div>
<div class="name logo">Name<br>Title</div>
<div class="right-nav">
<button class="mobilemenu mobilemenu--htx">
<span></span>
</button>
<div class="desktop-nav">
<ul>
<li class="desktoplinkitem">Contact</li>
<li class="desktoplinkitem">About</li>
<li class="desktoplinkitem">Stills</li>
<li class="desktoplinkitem">Video</li> </ul>
</div>
</div>
</div>
The CSS is styled like:
.header {
width: 100%;
position: absolute;
top: 0;
z-index: 600;
flex: none;
}
.videohead {
display: inline-block;
}
.desktoplinkitem {
visibility: inherit;
color: inherit;
background: none !important;
}
.linkitem {
visibility: inherit;
color: #FFFFFF;
transform: scale(2, 2) translateX(-100px);
opacity: 0;
}
.right-nav {
position: absolute;
right: 0%;
padding: 35px;
color: #000000;
text-decoration: none;
}
.right-nav ul {
height: auto;
padding: 8px 0px;
margin: 0px;
float: right;
}
.right-nav li {
display: inline;
padding-top: 1em;
padding-bottom: 1em;
padding-left: 1em;
letter-spacing: 1px;
float: right;
}
I've tried to add a clear fix hack with no result (using the following):
.videohead:after {
content: " ";
display: table;
height: 0;
clear: both;
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML += '<div class="ie7-clear"></div>' );
}
The page can be seen here
Is there another way to approach this?
It is fixed by removing the position: absolute; from .logo.
You header stays empty because every child inside it has been positioned in a different way the either static or relative.
The floating could have been the issue if they were a direct child of .header
Related
I have a question, is it possible to have a full width dropdown menu when my wrapper has a width of 1024px (all contents are centered on screen)? Because I am having problems with my dropdown menu. Though, it is not yet working with the hover but I'm still trying to style my dropdown menu.
Here's my code:
#lower-header {
background-color: #ffffff;
height: 100px;
position: relative;
width: -webkit-fill-available;
z-index: 1;
img {
float: left;
margin-top: 33px;
}
ul {
list-style: none;
display: block;
float: left;
margin: 17px 0px;
padding-left: 30px;
li {
display: inline-block;
font-size: 17px;
font-weight: bold;
padding: 16px 19px;
height: 73px;
.sub-menu-whole {
background-color: #ffffff;
height: 360px;
/*position: absolute;*/
z-index: 1;
margin-top: 44px;
&:after {
content: "";
display: table;
clear: both;
}
div {
position: absolute;
margin: -33px 0;
padding: 0;
div {
float: right;
}
}
}
a {
text-decoration: none;
color: #000000;
&:hover {
color: red;
}
}
}
}
}
<div id="lower-header">
<div class="wrapper">
<img src="images/logo/logo_01.png">
<ul>
<li>
KU 스타트업
<div class="sub-menu-whole">
<div>
<img src="images/bg/bg_sub_01.png">
</div>
<div class="column">
<ul>
<li>
<a>인사말</a>
</li>
<li>
<a>창업부서소개</a>
</li>
</ul>
</div>
</div>
</li>
<li>프로그램</li>
<li>스타트업 리더</li>
<li>창업보육</li>
<li>창업멘토단</li>
<li>커뮤니티</li>
</ul>
</div>
</div>
Remove the float: left; property from the ul and add width:100%;
This question already has answers here:
How do I vertically align text in a div?
(34 answers)
How can I horizontally center an element?
(133 answers)
Closed 5 years ago.
I've looked at several posts here on stackoverflow and can't find an answer that solves my issue. The issue appears to be the same as many other questions, with the simple difference that I am trying to center text that will change and I want it perfectly centered.
Below is a a basic example of what I have currently; the text on the bottom is centered between the text on the left and right, where as the text on the top is centered in the DIV. The text on the bottom should reflect the same.
I have tried a multitude of solutions, from display: inline block (which decreases my spacer width) to margin: 0 auto, all the way to converting the containing div to display: table-cell, vertical align middle.
Any help will be greatly appreciated!
body {
background: #333;
color: white;
}
.container {
width: 80%;
height: 150px;
position: relative;
left: 10%;
}
.container .slide, li { display: none; }
.active { display: block !important; }
.header { text-align: center; }
ul {
margin: 0;
padding-left: 0px;
}
li {
list-style: none;
font-variant: small-caps;
}
.spacer {
width: 100%;
height: 1px;
background: white;
box-shadow: 1px 1px 15px 1px rgba(0, 150, 255, 1);
margin-top: 5px;
margin-bottom: 5px;
}
.slide {
width: 100%;
height: 79%;
background-color: white;
}
.focus { text-align: center; }
.left { float: left; }
.right { float: right; }
<div class="container">
<div class="header">
<div class="spacer"></div>
<ul>
<li class="active">Summary</li>
</ul>
<div class="spacer"></div>
</div>
<div class="slide active">
</div>
<div class="slide">
</div>
<div class="focus">
<div class="spacer"></div>
<ul class="left">
<li class="active">ASDF</li>
</ul>
<ul class="right">
<li class="active">POV - ASR</li>
</ul>
<ul>
<li class="active">LKJHGFDSAPOIURTQAJK</li>
</ul>
<div class="spacer"></div>
</div>
</div>
EDIT
This post is not able to use the answers utilized in both related questions; though they are similar in nature, setting a specific width for my LI elements to achieve perfect center is not possible with pure CSS (SCSS maybe but not CSS3). The display: table answer did not work for me. Hence the reason I asked it as a new question; I tried 15 different suggested answers before posting my question.
I would put the 3 links in the footer in a single ul, use display: flex on the ul, and flex: 1 0 0 on the li's so they'll take up the same amount of space, then use text-align in each li to position the text.
body {
background: #333;
color: white;
}
.container {
width: 80%;
height: 150px;
position: relative;
left: 10%;
}
.container .slide,
li {
display: none;
}
.active {
display: block !important;
}
.header {
text-align: center;
}
ul {
margin: 0;
padding-left: 0px;
}
li {
list-style: none;
font-variant: small-caps;
}
.spacer {
width: 100%;
height: 1px;
background: white;
box-shadow: 1px 1px 15px 1px rgba(0, 150, 255, 1);
margin-top: 5px;
margin-bottom: 5px;
}
.slide {
width: 100%;
height: 79%;
background-color: white;
}
.focus {
text-align: center;
}
/* new stuff */
.bottom {
display: flex;
}
.bottom li {
flex: 1 0 0;
}
.bottom li:first-child {
text-align: left;
}
.bottom li:last-child {
text-align: right;
}
<div class="container">
<div class="header">
<div class="spacer"></div>
<ul>
<li class="active">Summary</li>
</ul>
<div class="spacer"></div>
</div>
<div class="slide active">
</div>
<div class="slide">
</div>
<div class="focus">
<div class="spacer"></div>
<ul class="bottom">
<li class="active left">ASDF</li>
<li class="active left">LKJHGFDSAPOIURTQAJK</li>
<li class="active left">POV - ASR</li>
</ul>
<div class="spacer"></div>
</div>
</div>
If you don't want your left and right items to effect the positioning of the center item, you can take them out of the flow by using position: absolute;.
With this in place, you can align them using left or right.
ul.left, ul.right {
position: absolute;
}
ul.left {
left: 0;
}
ul.right {
right: 0;
}
Working example:
body {
background: #333;
color: white;
}
.container {
width: 80%;
height: 150px;
position: relative;
left: 10%;
}
.container .slide, li { display: none; }
.active { display: block !important; }
.header { text-align: center; }
ul {
margin: 0;
padding-left: 0px;
}
li {
list-style: none;
font-variant: small-caps;
}
.spacer {
width: 100%;
height: 1px;
background: white;
box-shadow: 1px 1px 15px 1px rgba(0, 150, 255, 1);
margin-top: 5px;
margin-bottom: 5px;
}
.slide {
width: 100%;
height: 79%;
background-color: white;
}
.focus { text-align: center; }
ul.right {position: absolute; right: 0;}
ul.left {position: absolute; left: 0;}
<div class="container">
<div class="header">
<div class="spacer"></div>
<ul>
<li class="active">Summary</li>
</ul>
<div class="spacer"></div>
</div>
<div class="slide active">
</div>
<div class="slide">
</div>
<div class="focus">
<div class="spacer"></div>
<ul class="left">
<li class="active">ASDF</li>
</ul>
<ul class="right">
<li class="active">POV - ASR</li>
</ul>
<ul>
<li class="active">LKJHGFDSAPOIURTQAJK</li>
</ul>
<div class="spacer"></div>
</div>
</div>
I've removed your float properties because with this implementation, they are no longer necessary.
This is my html code below:-
.header {
background-color: #b6b4b4;
padding: 5px;
}
.logo {
border-radius: 30px;
float: left;
}
#social {
width: 50px;
border-radius: 100%;
float: right;
}
.navigatbar {
margin-top: -16px;
}
#navigat {
display: inline;
color: #b6b4b4;
font-size: 21px;
font-family: 'Poppins', sans-serif;
margin: 0 10px;
padding: 0 3px 0 3px;
}
.topnav {
background: #ffffff;
}
a {
color: #2ad2c9;
}
.active {
background-color: #e8e8e8;
}
.droplinks {
position: absolute;
background-color: #ffffff;
min-width: 140px;
display: none;
}
.droplinks a {
padding: 10px;
display: block;
}
.dropbutton:hover .droplinks {
display: block;
}
<body link="#008080" vlink="#66b2b2">
<div class="header">
<img src="images/logo.jpg" class="logo">
<img src="slike/yt.png" id="social">
<img src="slike/ig.png" id="social">
<img src="slike/fb.png" id="social">
</div>
<div class="navigatbar">
<ul class="topnav">
<li class="active" id="navigat">Početna</li>
<li class="dropbutton" id="navigat">Fitnes
<div class="droplinks">
Treninzi
Dijagnostika
</div>
</li>
<li id="navigat">Školica sporta</li>
<li id="navigat">Boks</li>
<li id="navigat">Personalni treninzi</li>
<li id="navigat">Ishrana i zdravlje</li>
<li class="dropbutton" id="navigat">Prevencija i rehabilitacija
<div class="droplinks">
Prevencija
Rehabilitacija
Kiropraktika
Kinezitejping
</div>
</li>
<li id="navigat">Kontakt</li>
</ul>
</div>
</body>
Now, here is the problem: my dropdown menus work, but both of them open on the left side of the navigation bar, under the first element. Where have I gone wrong?
I've tried to add some margin-left and it works, butthe problem is that it moves both of them for the same amount of pixels, and they're still opening on the same place. I could give different classes to them and add them a different margin-left, but I'm kind of sure that that is not the only possible solution.
Can anyone help me, please?
Change your CSS in 2 places:
#navigat {
display: inline;
color: #b6b4b4;
font-size: 21px;
font-family: 'Poppins', sans-serif;
margin: 0 10px;
padding: 0 3px 0 3px;
position: relative; /* add this line */
}
.droplinks {
position: absolute;
background-color: #ffffff;
min-width: 140px;
display: none;
left: 0; /* add this line */
z-index: 1; /* add this line */
}
Add this to your css
.dropbutton { position: relative; }
Absolutely positioned elements are positioned relative to their first ancestor that have a non-static position. position: static is the default for all elements, unless otherwise supplied.
That means in your case, the drop down menus are both positioned relative to the body of the document. What you want, is to position them relative to the button that triggers them. The above suggestion should take care of that.
Also, use left, top, right and bottom instead of margin to position your dropdowns.
I'm making a website and I have a banner which is just an image with a Z-Index of -1. It has 2 lines of text over the top of it as well as the transparent navigation bar at the top. Is there a way to write a paragraph underneath the banner without it overlaying onto the image?
JSFiddle
<ul class="Nav">
<div class="Logo">
<img src="Logo.png">
</div>
<li>Home</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact Me</li>
</ul>
<ul class="Banner">
<div class="Banner">
<img class="Banner-Image" src="Img/Banner1.jpg">
<div class="Title">
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<h1>BradTech</h1>
<p>Professional Website Development and Graphic Design</p>
</div></div>
</ul>
<ul class="Text">
<p>I want this paragraph underneath.</p>
Body {
font-family: 'Arial', Serif;
margin: 0;
padding: 0;
}
.nav {
color: #000000;
list-style: none;
text-align: right;
padding: 20px 0 0 0;
z-index: 1;
}
.nav > li {
display: inline-block;
padding: 0 25px 0 25px;
font-size: 17px;
}
.nav > li > a {
text-decoration: none;
color: #000000;
}
.nav > li > a:hover {
color: #666666;
}
.Logo {
float: left;
padding-left: 25px
}
.Banner {
padding: 0;
margin: 0;
width: 100%;
display: block;
}
.Banner > .Banner-Image {
width: 100%;
display: block;
position: absolute;
z-index: -1;
top: 0;
}
.Title {
text-align: center;
}
.Title > h1 {
font-size: 60px;
}
.Text {
position: relative;
z-index: -1;
}
What the website looks like
If you use absolute positioning, the last addition will be shown on top.
for example to place top left:
style='position:absolute;left:0px;top:0px;'
html example:
<p style='position:absolute;left:0px;top:0px;'>
foo
</p>
<img src='bar.png' style='position:absolute;left:0px;top:0px;' />
If you want the rest of the page to continue without using position:absolute, you could add a margin to the next html object. Otherwise it will overlap the absolute objects.
Without an example, it's difficult to say what the exact problem is.
My best guess would be that your navigation bar contains floated list items, that don't have a clearfix applied. This would give it a zero height, meaning a subsequent paragraph would overlap slightly.
Try creating a clearfix CSS class and adding it to your nav bar.
Something along the lines of:
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
.clearfix {
display: block;
}
Applied like:
<nav class="clearfix"></nav>
<p>Extra text</p>
fiddle
The title appears overtop of the content above it.
Adding the Twitter's .clearfix to the container doesn't seem to solve the problem. I'm not sure how to push my titlebar down below the content above it.
Suggestions?
.clearfix reference (from Twitter Bootstrap) -- written in less:
.clearfix {
*zoom: 1;
&:before,
&:after {
display: table;
content: "";
// Fixes Opera/contenteditable bug:
// http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
line-height: 0;
}
&:after {
clear: both;
}
}
And use like:
.title-tabs {
.clearfix; /* HERE */
border-bottom: 1px solid #91b6eb;
position: relative;
h3 {
float: left;
margin: 0;
display: block;
position: absolute;
left: 0;
bottom: 0;
}
/* etc... */
Here is probably what you are looking for
http://jsfiddle.net/rUQ2z/2/
<div class="main-content">
<div class="container">
<div class="access-details">
<div class="pull-left">
<div>Logged in: <b>John Doe</b>
</div>
<div>Access Lvl: Noob</div>
</div>
<div class="pull-right">
<div>Sunday, January 13th, 2013</div>
</div>
</div>
<div class="title-tabs clearfix">
<h3>Client Details</h3>
<ul class="nav">
<li class="active">Details
</li>
<li>Program
</li>
<li>Special
</li>
<li>Docs
</li>
<li>Notes
</li>
</ul>
</div>
<p>Welcome to Client Details</p>
</div>
</div>
h3 {
font-size: 36px;
}
.clearfix {
*zoom: 1;
&:before, &:after {
display: table;
content:"";
// Fixes Opera/contenteditable bug: // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952 line-height: 0;
}
&:after {
clear: both;
}
}
.title-tabs {
.clearfix;
border-bottom: 1px solid #91b6eb;
position: relative;
h3 {
float: left;
margin: 0;
display: block;
left: 0;
bottom: 0;
}
ul {
float: right;
margin: 0;
display: block;
right: 0;
bottom: 0;
li {
float: left;
a {
display: block;
padding: 3px 5px;
background-color: #f9fafe;
.border-radius(5px, 0, 0, 5px);
border-color: #91b6eb;
border-width: 2px 2px 0 2px;
border-style: solid;
text-transform: uppercase;
font-weight: bold;
}
}
li + li {
margin-left: -2px;
}
}
}
There is no need for position: absolute on the same class that uses float. You either use floats or you use position relative/absolute.
You want to apply clearfix to the container that contains your float which will update the height of your container allowing the content below the clearfix to not overlap with your content above.
EDIT
If you are looking for an alternative answer dealing with dynamic content where you want the menu items to float right and and align bottom then tables is a way to do this.
Take a look at the following code. I made the container be the table, title-tabs be the title-row and I added ul-container so I can make the menu items be contained within a table cell.
http://jsfiddle.net/rUQ2z/11/
<div class="main-content">
<div class="container">
<div class="access-details">
<div class="pull-left">
<div>Logged in: <b>John Doe</b>
</div>
<div>Access Lvl: Noob</div>
</div>
<div class="pull-right">
<div>Sunday, January 13th, 2013</div>
</div>
</div>
<div class="title-tabs">
<h3>Client Details</h3>
<div class="ul-container">
<ul class="nav">
<li class="active">Details
</li>
<li>Program
</li>
<li>Special
</li>
<li>Docs
</li>
<li>Notes
</li>
</ul>
</div>
</div>
<p>Welcome to Client Details</p>
</div>
</div>
h3 {
font-size: 36px;
}
.clearfix {
*zoom: 1;
&:before, &:after {
display: table;
content:"";
// Fixes Opera/contenteditable bug: // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952 line-height: 0;
}
&:after {
clear: both;
}
}
.container {
display: table;
width: 100%;
}
.title-tabs {
.clearfix;
display: table-row;
border-bottom: 1px solid #91b6eb;
position: relative;
h3 {
margin: 0;
vertical-align: bottom;
display: table-cell;
left: 0;
bottom: 0;
}
.ul-container {
display: table-cell;
text-align: right;
vertical-align: bottom;
}
ul {
margin: 0;
display: inline-block;
right: 0;
bottom: 0;
li {
float: left;
a {
display: block;
padding: 3px 5px;
background-color: #f9fafe;
.border-radius(5px, 0, 0, 5px);
border-color: #91b6eb;
border-width: 2px 2px 0 2px;
border-style: solid;
text-transform: uppercase;
font-weight: bold;
}
}
li + li {
margin-left: -2px;
}
}
}
What happened is that your .title-tabs was set to relative, and h3 set to absolute and bottom, because you the .title-tabs do not have a height, so the h3 element will take the last bottom and goes out of the .title-tabs line. Remove bottom from h3 css.