My CSS layout is not working the way it should - css
Ok so I have my web page (http://jsfiddle.net/HVGBf/) but it's not working the way I would like it to be working.
As you see on a small browser the Logos text is jumping down because of the line-height.
I'd like the Project Name to be abreast if possible, else i'd like it to be among each other but how can I accomplish that?
Html:
<body class="home">
<div id="wrapper">
<div id="logo">
<span>Project name</span>
</div><!-- endLogo -->
<div id="menu">
<ul>
<li>Home</li>
<li>Over ons</li>
<li>Projecten</li>
<li>Vrienden</li>
<li>Doneren</li>
<li>Contact</li>
</ul>
</div><!-- endMenu -->
</div>
</body>
</html>
Css:
/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
html, body { font-family: "helvetica", arial; margin: 0; padding: 0; height:100%;}
#wrapper {
min-width: 800px;
}
.home #logo {
background: #00B65F;
width: 22%;
float: left;
padding: 0 1% 0 2%;
text-align: right;
-webkit-border-top-right-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
-moz-border-radius-topright: 15px;
-moz-border-radius-bottomright: 15px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
line-height: 180px;
height: 180px;
font-size: 220%;
}
.home #logo span {
font-color: #000;
}
.home #menu {
background-color: #000;
float: right;
background-repeat: repeat;
padding: 56px 5% 56px 1%;
-webkit-border-top-left-radius: 15px ;
-webkit-border-bottom-left-radius: 15px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomleft: 15px;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
margin-left: 6%;
width: 63%;
height: 70px;
}
#menu ul {
float: left;
margin: 0;
padding: 0;
width: 100%;
}
#menu li {
float: left;
list-style-type: none;
}
#menu a {
float: left;
text-decoration: none;
font-size: 150%;
color: #fff;
padding: 0.4em 0.7em 0.4em 0.7em;
-webkit-border-radius: 10px;
border-radius: 10px;
display: block;
}
#menu a:hover, #menu .active { background-color: #00B65F; }
If you just want the words "Project" and "Name" to be on one line, then this should do the trick:
#logo span { white-space: nowrap; }
The text might extend outside of #logo due to how you've sized it (by percentage), so to fix that you could also add a minimum width like so:
#logo { min-width: 200px; }
Edit: I noticed you also have margin-left set to 6%. I would recommend using a constant value like 20px. Also, here is a jsFiddle with the recommendations I've mentioned.
Related
CSS3 Nav not aligning
I've researched this topic and noticed I'm not the only one with this issue; however the answers found on others with the same question hasn't solved anything. I set my links specific to nav, have set both nav and 'a nav' to position relative, margin to 0, text-align to center, veritcal align to middle but can't seem to get it centered.
nav {
margin: auto;
margin-bottom: 10px;
max-width: 35%;
height: 45px;
}
nav a {
position: relative;
padding: 0px 15px;
margin: 4px 0px;
font-size: 25px;
text-decoration: none;
color: #ECF0F1;
border: 1px solid black;
}
<nav>
HomeTeamAboutFilesForum
</nav>
As a slight edit; why does the hover not cover the entire length of the nav? Do I just need to adjust the top and bottom padding?
Layout
Hover Result
Solution #1 (using flexbox / newer browser):
nav {
display:flex;
flex-direction:row;
margin: auto;
margin-bottom: 10px;
height: 45px;
justify-content:center;
}
nav a {
position: relative;
padding:0px 15px;
margin: 4px 0px;
font-size: 25px;
text-decoration: none;
color: #ECF0F1;
}
<nav>
Home
Team
About
Files
Forum
</nav>
Solution #2 (for older browser too):
nav {
margin-bottom:10px;
height:45px;
text-align:center;
}
nav a {
display:inline;
padding:0px 15px;
margin: 4px 0px;
font-size: 25px;
text-decoration:none;
color:#ECF0F1;
}
<nav>
Home
Team
About
Files
Forum
</nav>
Edit your code
nav{
margin: auto;
margin-bottom: 10px;
text-align:center;
height: 45px;
}
You can use lists as the markup for navigation
HTML:
<nav>
<ul>
<li>
Home
</li>
<li>Team</li>
<li>About</li>
<li>Files</li>
<li>Forum</li>
</ul>
</nav>
CSS:
nav {
vertical-align: middle;
margin: auto;
margin-bottom: 10px;
max-width: 35%;
height: 45px;
}
nav li {
display: inline-block;
position: relative;
padding: 0px 15px;
margin: 4px 0px;
}
nav li a {
font-size: 25px;
text-decoration: none;
color: #ECF0F1;
}
Nested div-container gets bigger then parent element
I just tried to create nested elements, but the inner element (subcategory) gets always bigger, then the parent element (category).
Please have a look at this JSFiddle:
JSFiddle: http://jsfiddle.net/d7vhpcmt/
HTML:
<div id="content" class="clearfix">
<section class="category boxed">
<section class="box_1"><header class="trigger trigger_aktiv"><h2>Category</h2></header>
<div class="content">
<section class="box_1 boxed"><header class="trigger"><h2>Subcategory</h2></header>
<div class="content"></div>
</section>
</div>
</section>
</section>
</div>
CSS:
.category {
background-color: #f8f8f8;
padding: 20px;
margin-bottom: 10px;
width: 100%;
max-width: 1600px;
float: left;
margin-right: 10px; }
.category a {
color: #262626;
text-decoration: none;
border-bottom: 0;
background-color: transparent;
display: block;
width: 100%; }
.category h1 {
font-size: 2.0em;
margin: 0 0 0.5em 0;
font-weight: 300;
line-height: 1em;
color: #262626;
letter-spacing: -1px; }
.box_1 {
background-color: #E9E9E9;
margin-top: 5px;
border: 1px solid #E2E2E2;
display: block;
width: 100%; }
.box_1:hover {
background-color: #eee; }
.box_1 header {
padding: 5px 0 0 50px; }
.box_1 .content {
background-color: #f2f2f2;
height:100%;
padding: 0.2em 0 0 0; }
.box_1 .content p { margin: 0.5em 0.8em; }
.box_1 .content h3 {
font-size: 1.2em !important;
margin-left: 0.3em; }
.box_1 .content .box_1 {
margin: 5px; }
It's because you have given .box_1 it a width of 100% and .content .box_1 and margin of 5px; this means your box is going to be 100% + 10px - instead of using margin try add padding to the parent container, this way you don't need to keep adding 5px margin to all it's children:
.box_1 .content {
background-color: #f2f2f2;
height:100%;
padding: 0.2em 5px 0 5px;
}
Example
If you are not worry about IE8 then use calc in your box_1 class.
.box_1 {
background-color: #E9E9E9;
margin-top: 5px;
border: 1px solid #E2E2E2;
display: block;
width: calc(100% - 10px);
}
DEMO
The problem is in this piece of code:
.box_1 .content .box_1 {
margin: 5px;
}
You are applying a margin around the entire section containing the Subcategori. Just edit in this way:
.box_1 .content .box_1 {
margin: 5px 0;
}
In order to remove the margin right and left.
Here is the JSFiddle.
Why are the margins not working correctly?
I want to achieve this:
I have achieved this:
Why are the margins set on #members-content-box not working correctly? The page is live at http://goo.gl/e7yiAf
<section id="members-content">
<div id="members-menu">
<ul>
<li>My Items</li>
<li>Submit Items</li>
<li>Account Settings</li>
</ul>
<div id="menu-line">
</div>
</div>
<div id="members-content-box">
hello
<br /><br /><br />
</div>
</section>
My CSS:
/* members menu*/
#members-content { width: 100%; margin: 0 auto;}
#members-menu { width: 100%; text-align: left; margin-bottom: 30px;}
#members-menu ul { list-style: none;}
#members-menu li { background-color: #FFF; width: 127px; height: 25px; text-align: center; float: left; margin-right: 7px; padding-top: 8px}
#members-menu li a { font-family: Verdana, Geneva, sans-serif; font-size: 12px; font-weight: normal; color: #2e2e2e; text-decoration: none;}
#members-menu li a:hover { color: #ffbe00;}
#members-menu li a:active { color: #ffbe00;}
#menu-line { height: 5px; background-color: #FFF; float:left; min-width: 100%; margin-left:0 40px 0 40px;}
/* members-content-box */
#members-content-box { background-color:#FFF; padding: 35px; float: left; width:100%; border: 1px solid grey;}
Use margin instead of padding - padding will just enlarge the div from inside including its background
#members-content-box { background-color:#FFF; margin: 35px; float: left; width:100%; border: 1px solid grey;}
To Achieve the above one put the padding-bottom for members-menu ul
#members-menu{
padding-bottom:30px;
}
And change members-content-box css like this
#members-content-box {
background-color: #FFF;
padding: 35px;
float: left;
width: 90%;
border: 1px solid grey;
margin-left:30px;
}
I think this one helpful to you.
Can't get NavBar TRULY centered in wrap
I've been working on my navbar and with the help of this site, managed to find out how to center it using text align. However, there is a weird indent that I cannot account for in my navbar as you can see in the example so when I center it, it's taking the indent into consideration too, so it doesn't look right.
How do I remove this indent and have it centered properly? I'm rather new to this, so advice would be great. Many thanks.
http://jsfiddle.net/f2eNm/
HTML
<div class="links_container">
<div class="nav1">
<ul>
<li>Home</li>
<li>About</li>
<li>Challenges</li>
<li>Progress</li>
<li>Forum</li>
</ul>
</div>
</div>
CSS
*{
margin:0;
}
.links_container {
width: 100%;
height: 25px;
background-color: #33C4AB;
margin-right: auto;
margin-left: auto;
border-bottom-style: double;
border-bottom-width: 2px;
border-color: #000000;
/* [disabled]-webkit-box-sizing: inherit; */
/* [disabled]-moz-box-sizing: inherit; */
/* [disabled]box-sizing: inherit; */
position: absolute;
max-width: 1000px;
}
.nav1 {
display: inline;
float: left;
}
.nav1 ul li {
list-style-type: none;
float: left;
display: block;
}
.nav1 ul li a {
color: #FFFFFF;
text-decoration: none;
background-color: #333333;
display: inherit;
height: 25px;
width: 100px;
text-align: center;
line-height: 25px;
border-left: thin solid #CCCCCC;
}
.noBorder {
border-left-style: none !important;
}
.nav1 ul li a:hover {
background-color: #6B6B6B;
}
.leftedge {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.rightedge {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
You need to change some things.
.nav1
{
text-align: center;
}
.nav1 ul {
margin: 0;
padding: 0;
display: inline-block;
overflow: hidden;
}
http://jsfiddle.net/f2eNm/3/
List (nav) items wont stretch over div that is floated right
I am currently trying to get a horizontal navigation menu to stretch from across the whole of my container.
The div that it is in stretches across fine, but the actual list items don't and I am unsure why.
The CSS for the right hand bar, the container holding the nav bar, and the nav items is:
#rhs{
position: relative;
float: right;
height: 720px;
width: 200px;
background-color: #3D0099;
border-left:2px solid #616161;
}
nav{
display: block;
position: relative;
width: 1010px;
height: 50px;
margin-left: 7px;
background-color: #F0F0F0;
border-top: 1px solid #616161;
border-bottom: 1px solid #616161;
z-index: 99999;
}
nav li{
list-style: none;
display: inline;
margin-left: 10px;
z-index: 99999;
}
The full jsfiddle: http://jsfiddle.net/zDzLs/
Any ideas?
Change css of rhs div to:
#rhs{
position: absolute;
right:0px;
height: 720px;
width: 200px;
background-color: #3D0099;
border-left:2px solid #616161;
}
your code was making my OCD go crazy.
I've revised it a bit for you here. Hope you like it.
http://jsfiddle.net/zDzLs/3/
<header>
<img class="logo" src="images/header.png"/>
<nav>
<ul>
<li class="active">Home</li>
<li>What is Counselling?</li>
<li>Personal Counselling</li>
<li>Relationship Counselling</li>
<li>Supervision of Counsellors</li>
<li>Life Coaching</li>
<li>Contact Me</li>
</ul>
</nav>
</header>
<div class="container">
<div class="content-left"><div class="inner">LEFT</div></div>
<div class="content-right"><div class="inner">RIGHT</div></div>
</div>
* {
padding: 0;
margin: 0;
}
body{
background-color: #F0F0F0;
font: 14px Century Gothic;
}
header {
width: 960px;
margin: 30px auto;
}
header .logo {
width: 300px;
}
nav {
background: #F0F0F0;
margin-top: 30px;
overflow: hidden;
}
nav ul li {
list-style-type: none;
float: left;
margin-right: 2px;
font-size: 12px;
}
nav ul li a {
display: inline-block;
text-decoration: none;
padding: 10px;
background: #333;
color: #fff;
text-align: center;
}
nav ul li a:hover,
nav ul li.active a {
background: #666;
}
.container {
margin: 30px auto 0;
width: 960px; /* 958px */
border:2px solid #616161;
overflow: hidden;
background: #fff;
}
.content-left {
float: left;
width:628px;
margin-right: 30px;
}
.content-right {
float:left;
width: 300px;
background: #f9f9f9
}
.inner {
padding: 20px;
}