I am trying to get start a web site for fun but I am having issues with CSS styles and tags with aligning I have a container, horizontal nav, left Nav, right Nav, Header and footer.
They are all in the container element but I can not align them properly. The header and norz nav are fine and so are the footers. The problem I am having is that the left body and right do not align properly can any one help. below is the coding for the HTML
<body>
<div id="container">
<div id="header">
</div>
<div id="horizontalnav">
<div class="navlinks ">
<ul>
<li>Facebook</li>
<li>Gaia</li>
<li>Roblox</li>
<li>Adventure Quest</li>
<li>Anime Freak</li>
<li>Youtube</li>
</ul>
</div>
</div>
<div id="leftnav">
<p>Left Nav </p>
</div>
<div id="body">
</div>
<div id="rightnav">
<p>right Nav </p>
</div>
<div id="footer">
this is the footer
</div>
</div>
</body>
and now for the css yes i use the one off of 2createawebsite.com and try to manipulate it
#container {
width: 100%;
}
#header {
width: 89%;
height: 15%;
position: relative;
background-image: url(Header.jpg);
border-bottom: 2px solid #000000;
}
#header a {
color: #ffffff;
text-decoration: underline;
font-weight: bold;
font-family: Verdana;
font-size: 14px;
}
#header a:visited {
color: #000000;
text-decoration: underline;
font-weight: bold;
}
#header a:hover {
color: #cc0000;
text-decoration: none;
font-weight: bold;
}
#horizontalnav {
width: 89%;
height: 30px;
position: relative;
background-color: #F2D6AF;
border-bottom: 2px solid #000000;
}
.navlinks {
position: absolute; top: 4px; left:240px;
}
.navlinks ul {
margin: auto;
}
.navlinks li {
margin: 0px 18px 0px 0px;
list-style-type: none;
display: inline;
}
.navlinks li a {
color: #000000;
padding: 5px 12px 7px;
text-decoration: none;
font-size: 16px;
font-family: Verdana;}
.navlinks li a:hover{
color: #ffffff;
background-image: url(Header.jpg);
text-decoration: underline;
}
#header p {
color: #000000;
font-family: Arial;
font-weight: bold;
}
.smalltext {
font-size: 9px;
font-family: Arial;}
#leftnav {
float: left;
width: 10%;
height: 70%;
background-color: #F8AA3C;
border-right: 1px dashed #694717;}
#rightnav {
float: right;
width: 10%;
height: 70%;
background-color: #F8AA3C;
border-left: 1px dashed #694717;}
#body {
margin-left :0px ;
width : 50% ;
padding: 0px 0px 0px 0px;
}
#body p {
word-wrap : true ;
font-family : courier new ;
}
#footer {
clear: both;
background-color: #D1C0A7;
}
If you change #header and #horizontalnav to 100% this makes everything expand to the width of the page; I assume this is what you wanted to accomplish
#header {
/* existing code */
width: 100%;
}
#horizontalnav {
/* existing code */
width: 100%;
}
As for the left column, body column and right column, these can be set to inline-block (float is not needed then) and their widths can be set to 10%, 80%, 10% respectively. In general this should fix the layout.
Related
I am having difficulty aligning the divs in the middle of the page. Hence I have used absolute positioning to place them in the middle.But when I try to do media queries its difficult to place them in the middle. Please any help is appreciated.
nav>ul {
position: absolute;
top: 114px;
text-align: center;
;
}
nav>ul>li {
list-style: none;
float: left;
}
nav>ul>li>a {
text-decoration: none;
font-family: 'Abel', sans-serif;
color: #fff;
font-size: 18px;
font-weight: bold;
padding: 10px 45px 10px 45px;
background: #20639B;
border-left: 3px solid #34F532;
}
.color2 {
height: 0px;
border-bottom: 45px solid #20639B;
}
<div class="color2">
<div class="header">
<nav>
<ul>
<li> Privacy</li>
<li> Terms of Use</li>
<li>Copyright</li>
<li>Trademark</li>
<li>Logos</li>
<li>Pay Transparency</li>
</ul>
</nav>
</div>
</div>
You were close. Just remove position: absolute from nav>ul, and remove the float: left from nav>ul>li and replace it with display: inline-block.
nav>ul {
padding-top: 10px;
text-align: center;
}
nav>ul>li {
list-style: none;
display: inline-block;
}
nav>ul>li>a {
text-decoration: none;
font-family: 'Abel', sans-serif;
color: #fff;
font-size: 18px;
font-weight: bold;
padding: 10px 45px 10px 45px;
background: #20639B;
border-left: 3px solid #34F532;
}
.color2 {
height: 0px;
border-bottom: 40px solid #20639B;
}
<div class="color2">
<div class="header">
<nav>
<ul>
<li> Privacy</li>
<li> Terms of Use</li>
<li>Copyright</li>
<li>Trademark</li>
<li>Logos</li>
<li>Pay Transparency</li>
</ul>
</nav>
</div>
</div>
Flexbox can be one way to go. Here a quick JS Fiddle that shows you how you can achieve what you want: https://jsfiddle.net/58u76mrn/13/
nav {
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 100vw;
}
nav a {
text-decoration: none;
font-family: 'Abel',sans-serif;
color: #fff;
font-size: 18px;
font-weight: bold;
padding: 10px 45px 10px 45px;
background: #20639B;
border-left: 3px solid #34F532;
}
.color2 {
height: 0px;
}
Check this js fiddle
https://jsbin.com/geqovukozo/edit?css,output
nav{
position:absolute;
top:50%;
width:100%;
transform:translateY(-50%);
}
nav>ul {
text-align: center;
font-size:0;
}
nav>ul>li {
list-style: none;
display:inline-block;
}
nav>ul>li>a {
display:block;
text-decoration: none;
font-family: 'Abel', sans-serif;
color: #fff;
font-size: 18px;
font-weight: bold;
padding: 10px 45px 10px 45px;
background: #20639B;
border-left: 3px solid #34F532;
}
.color2 {
border-bottom: 45px solid #20639B;
}
Use positions with transform property in this case. and instead of float:left; use display:inline-block;
I've only been practicing HTML and CSS for a little over a year. I obviously have a lot to learn. When I started the re-design of my site, I used an available template. I've changed nearly everything except the sidebar. It has the sidebar on the left, and I want it on the right, because I figure it'll look nicer. I've changed the float from left to right for the sidebar. I've changed the float from right to left for the content. This just causes a lot of problems that I can't explain, and I don't know how to fix it. I've toyed with a lot of the css. Please help me understand what I'm doing wrong, and what I'm not thinking of changing that needs to be changed. I've played with this on a fiddle, and here it is with my changes (as you can see, I didn't get anywhere): The Fiddle
Here's my original:
HTML
<body>
<div id="wrapper">
<div id="header">
<!-- end div#logo -->
<div id="menu">
<ul style="
overflow: hidden;
width: 892px;
/* text-align: center; */
margin: 0 auto;
">
<li id="logo"></li>
<li>Home</li>
<li>Games</li>
</ul>
</div>
<!-- end div#menu -->
</div>
<!-- end div#header -->
<div id="page">
<div id="page-bgtop">
<div id="content">
<!-- InstanceBeginEditable name="Page Content" --><div class="post">
<h2 class="title">New Site Update!</h2>
<p class="byline">Posted by Nicholas Maguire</p>
<div class="entry">
<p> This is the editable area.</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div><!-- InstanceEndEditable -->
</div>
<!-- end div#content -->
<div id="sidebar">
<ul>
<li id="search">
<h2>Search</h2>
<form method="get" action="">
<fieldset>
<input type="text" id="seach-text" name="s" value="" />
<input type="submit" id="search-submit" value="Search" />
</fieldset>
</form>
</li>
<li>
<h2>Newest Games</h2>
<ul>
<li>ATV Destoyer</li>
<li>Army Driver</li>
<li>Arkanoid</li>
<li>Amazing Football</li>
<li>Alien Vs Predator</li>
<li>Airport Madness</li>
<li>Age of War</li>
</ul>
</li>
<li>
<h2>Contact Me</h2>
<ul>
<li>Contact Form</li>
<li>Requests</li>
</ul>
</li>
</ul>
</div>
<!-- end div#sidebar -->
<div style="clear: both; height: 1px"></div>
</div>
</div>
<!-- end div#page -->
</div>
<!-- end div#wrapper -->
<div id="footer">
<p id="legal">Copyright © 2014 Crazy Block. All Rights Reserved. </p>
<p id="links">Privacy Policy | Terms of Use</p>
</div>
<!-- end div#footer -->
</body>
CSS
{
margin: 0;
padding: 0;
}
body {
background: #E9E9E9;
text-align: justify;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #757E82;
margin: 0;
}
h1, h2, h3 {
color: #AA2808;
}
h1 {
}
h2 {
}
h3 {
}
p, blockquote, ul, ol {
margin-bottom: 20px;
line-height: 2em;
}
p {
}
blockquote {
}
ul, ol, li {
margin: 0px;
padding: 0px;
list-style: none;
}
a {
text-decoration: underline;
color: #1692ef;
}
a:hover {
text-decoration: none;
color: #165bef;
}
/* Wrapper */
#wrapper {
}
/* Header */
#header{
width: 100%;
height: 91px;
margin: 0;
top: 0;
}
/* Logo */
#logo {
float: left;
width: 270px;
height: 76px;
margin: 0px;
padding: 15px 0px 0px;
margin-left: 27%;
}
#logo h1 {
margin: 0;
padding: 0;
font: normal 36px Georgia, "Times New Roman", Times, serif;
}
#logo h2 {
margin: -2px 0 0 0;
padding: 0;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 10px;
font-weight: bold;
color: #444444;
}
#logo h2 a {
color: #9AA9B1;
}
#logo a {
text-decoration: none;
color: #165bef;
}
/* Menu */
#menu {
float: right;
width: 100%;
height: 54px;
margin-top: 0;
background: #ffffff url("/images/menu_bar.jpg") repeat-x left top;
position:fixed;
}
#menu ul {
overflow: hidden;
width: 892px;
margin: 0 auto;
padding: 0 30px;
list-style: none;
line-height: normal;
}
#menu li {
display: inline;
text-align: center;
}
#menu a {
display: block;
float: left;
height: 36px;
padding: 18px 20px 0px 20px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #ffffff;
}
li#logo {
height: 52px;
width: 52px;
background: url('/images/cb_logo.png') no-repeat;
margin-top: 1px;
margin-right: 1px;
margin-left: 1px;
}
#menu a:hover, #menu .active a {
background: #1687ef;
color: #FFFFFF;
}
/* Search */
#search {
height: 45px;
padding: 0px 0px 40px 0px;
}
#search form {
margin: 0;
padding: 12px 0px 0 0;
}
#search fieldset {
margin: 0;
padding: 0;
border: none;
}
#search input {
float: left;
font: 12px Georgia, "Times New Roman", Times, serif;
}
#search-text {
width: 120px;
height: 18px;
padding: 3px 0 0 5px;
border: 1px solid #000000;
color: #000000;
}
#search-submit {
height: 21px;
margin-left: 10px;
padding: 0px 2px;
border: none;
background: #000000;
color: #FFFFFF;
}
/* Page */
#page {
width: 892px;
margin: 0 auto;
}
#page-bgtop {
padding: 0px 30px;
}
/* Content */
#content {
float: right;
width: 564px;
padding-top: 30px;
}
.post {
margin: 0px 0px 30px 0px;
}
.post .title {
margin: 0px;
padding: 0px 0px 5px 0px;
color: #1f201d;
}
.post .title a {
padding: 4px 35px 4px 15px;
background-color: #1535EF;
text-decoration: none;
font-weight: normal;
color: #FFFFFF;
}
.post .entry {
}
.post img {
float: left;
padding: 15px 0px;
}
.post .meta {
text-align: right;
padding-top: 20px;
border-bottom: 1px solid #E5E5E5;
font-weight: bold;
color: #202020;
}
.post .byline {
float: right;
margin-top: -30px;
font-size: 12px;
color: #5E5E5E;
}
/* Sidebar */
#sidebar {
float: left;
width: 208px;
padding-top: 30px;
background-color:#D2D2D2;
margin-left:initial;
position: fixed;
}
#sidebar ul {
margin: 0;
padding: 10px;
list-style: none;
line-height: normal;
}
#sidebar li {
margin-bottom: 1px;
}
#sidebar li ul {
margin: 0px;
padding: 0px 0px 40px 0px;
}
#sidebar li li {
margin: 0;
padding: 9px 0px;
border: none;
background: url(images/img07.jpg) repeat-x left bottom;
}
#sidebar h2 {
margin: 0px;
padding: 0px;
border-bottom: 2px solid #EBEBEB;
font-size: 160%;
font-weight: normal;
color: #454E55;
}
#sidebar h3 {
font-size: 77%;
color: #454E55;
}
#sidebar p {
margin: 0;
line-height: normal;
color: #0038ff;
}
#sidebar a {
border: none;
text-decoration: none;
}
#sidebar a:hover {
text-decoration: underline;
}
/* Submenu */
#submenu {
}
/* News */
#news {
}
#news a {
font-size: 85%;
}
Try this,
#sidebar {
float: left;
width: 208px;
padding-top: 30px;
background-color:#D2D2D2;
margin-left:initial;
/*position: fixed;*/ //remove it
}
#content {
float: left; // change right to left
width: 564px;
padding-top: 30px;
}
Fiddle
When you used Position attribute in css float attribute won't work. So instead of float used right:0; see below code.
#sidebar {
/* float: left;*/
width: 208px;
padding-top: 30px;
background-color:#D2D2D2;
margin-left:initial;
position: fixed;
right:0;
}
#content {
float: left;
width: 564px;
padding-top: 30px;
}
And provide 100% width to inside (p, h2, div) so they wrap inside the #content div.
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.
I'm using a navigation bar for a project I'm working on. I've always had trouble with horizontal navigation bars, and I've looked everywhere for the right solution, without success. The navigation bar was shifted to the left, so I put in some padding in my css, and now it's centered, however the text is not centered in it, and the hover effect for the first link doesn't cover the whole 'box' the text is in.
CSS:
/* Entire Document CSS */
html{
height: 100%;
}
/* Header CSS */
.headers{
color: #FFFFFF;
text-align: center;
padding: 30px;
margin-bottom: 0px;
margin-top: 0px;
background-color: #63B8FF;
}
.headers2{
color: #FFD89A;
text-align: center;
padding: 10px;
}
/* Body CSS */
.body{
background-color: #61B329;
height: 50%;
color: #FFFFFF;
}
.container{
margin-left: auto;
margin-right: auto;
width: 50em;
text-align: center;
padding-bottom: 500px;
height: 50%;
}
/* Navigation CSS */
.nav{
display: inline-block;
background-color: #00B2EE;
border: 1px solid #000000;
border-width: 1px 0px;
margin: 0px 0px 0px 0px;
}
.nav li{
display: inline-block;
}
.nav a{
display: inline-block;
padding: 10px 110px 10px 0.80px;
text-align: center;
}
/* Footer CSS */
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
#content {
padding-bottom: 3em;
}
/* Link CSS */
a:link{
color: #FFFFFF;
text-decoration: none;
}
a:visited{
color: #FFFFFF;
text-decoration: none;
}
a:hover{
background-color: #028482;
color: #FFFFFF;
text-decoration: overline;
}
a:active{
background-color: #FF9C00;
color: #FFFFFF;
text-decoration: underline;
}
.Links A:hover{
color: #028482;
background-color: transparent;
text-decoration: underline overline;
}
HTML5 (Index Page)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Play - Learn - Grow</title>
<link rel="stylesheet" href="main.css">
</head>
<body class="body">
<h1 class="headers">Welcome to KUBE Toy Library!</h1>
<nav>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Become a Member</li>
<li>Borrow Toys</li>
<li>Our Policies</li>
<li>Site Map</li>
</ul>
</nav>
<h2 class="headers2">Welcome to the Home Page!</h2>
<div class="container">
Our aim is to provide the children of the community with an ever-changing variety of educational and fun toys to enhance
their cognitive, social, emotional and physical development in the important first six years of their lives.
<br><br><span class="Links">Be sure to check out our Wikispace site with more information here!</span>
</div>
<div id="content"></div>
<div id="footer">
Copyright © 2013
</div>
</body>
</html>
Note that I'm quite new compared to the others here on this forum, so please take it easy on me! :) Also this is a fictional company, etc. for an assignment I was given. Thanks!
Hi your page in my browser was displayed like below
I changed your css to make it browser resolution independent. As a UI developer I felt that overline was not looking good so I removed that. Use my code
/* Body CSS */
.body {
background-color: #61B329;
color: #FFFFFF;
}
/* Header CSS */
.headers {
color: #FFFFFF;
text-align: center;
padding: 30px;
margin: 0;
background-color: #63B8FF;
}
.headers2 {
color: #FFD89A;
text-align: center;
padding: 10px;
}
.container {
margin: 0 auto;
width: 50em;
text-align: center;
padding-bottom: 500px;
}
/* Navigation CSS */
.nav {
display: inline-block;
background-color: #00B2EE;
border: 1px solid #000000;
border-width: 1px 0px;
margin: 0;
padding: 0;
min-width: 1000px;
width: 100%;
}
.nav li {
list-style-type: none;
width: 14.28%;
float: left;
}
.nav a {
display: inline-block;
padding: 10px 0;
width: 100%;
text-align: center;
}
/* Footer CSS */
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
#content {
padding-bottom: 3em;
}
/* Link CSS */
a:link,
a:visited,
a:hover {
color: #FFFFFF;
text-decoration: none;
}
a:hover {
background-color: #028482;
}
a:active {
background-color: #FF9C00;
color: #FFFFFF;
text-decoration: underline;
}
.Links A:hover {
color: #028482;
background-color: transparent;
text-decoration: underline overline;
}
Demo:
http://jsfiddle.net/NphBK/
This is a common problem. But to fix this you need to make the parent text-align: center and give the children display: inline-block;
If you want to have it completely equalizing you'll need to switch to display: table and display: table-cell.
I have this JsFiddle, and I can not figure out why the buttons extend outside of the divs.
How can I get them to be inside of the divs?
Here is the CSS
.btn-link {
font-variant: small-caps;
text-decoration: none;
font-size: 1.2em;
padding: 8px 15px 12px 15px;
border-radius: 3px;
background-color: #7dc36b;
color: #ffffff;
}
div.left-nav {
float: left;
width: 200px;
}
div.left-nav > div {
clear: both;
width: 100%;
border: solid 1px red;
}
Here is the HTML:
<div class="left-nav">
<div>new story
</div>
<div>My Stories
</div>
</div>
You can specify display:inline-block; on the buttons, so the div expands to hold the anchors completely.
.btn-link {
font-variant: small-caps;
text-decoration: none;
font-size: 1.2em;
padding: 8px 15px 12px 15px;
border-radius: 3px;
background-color: #7dc36b;
color: #ffffff;
display:inline-block;
}
Fiddle
div.left-nav > div {
overflow: auto; /* removed clear: both; */
width: 100%;
border: solid 1px red;
}
div.left-nav > div > a {
display: inline-block;
}
http://jsfiddle.net/ZjvZu/10/
Hey hope this works for you : -
demo
<div class="left-nav">
<div class="btn">new story
</div>
<div class="btn">My Stories
</div>
CSS:-
.btn-link {
font-variant: small-caps;
text-decoration: none;
font-size: 1.2em;
padding: 8px 15px 8px 15px;
border-radius: 3px;
background-color: #7dc36b;
color: #ffffff;
}
div.left-nav {
float: left;
width: 200px;
}
div.left-nav > div {
clear: both;
width: 100%;
border: solid 1px red;
}
.btn{
padding:8px 15px 8px 15px;
}