I am trying to recreate the google site, for practice with CSS and HTML. I have a pretty good grasp on floats, and have my div elements where I want them to be. However, I've run into a few problems. (Note, the colors are just to help me track the div while I'm practising, I will end up changing that)
This is what I'm getting.
My questions are 1, where are the margins coming from, as i have not set any, and 2, where is the extra padding on the left side of the ul coming from, I want to get rid of the empty space.
#google-logo {
height: 100px;
width: 100px;
float: left;
background-color: gray;
}
div {
box-sizing: border-box;
}
header {
height: 100px;
}
#searchbar, #navbar {
height: 50px;
float: left;
background-color: blue;
width: 600px;
}
#navbar {
clear: left;
background-color: red;
padding: 0 11px;
}
#encompass {
box-sizing: border-box;
height: 100px;
float: left;
}
li {
display: inline-block;
padding: 5px;
}
ul, li {
height: 50px;
box-sizing: border-box;
margin: none;
}
<header>
<div id="google-logo"></div>
<div id="encompass">
<div id="searchbar"></div>
<div id="navbar">
<ul style="float: left;">oof
<li>Home</li>
<li>Images</li>
<li>Idk</li>
</ul>
<ul style="float: right;">
<li>Settings</li>
<li>Account</li>
</ul>
</div>
</div>
</header>
You need to remove browsers default style by setting margin:0 and padding:0 to ul it is default user agent stylesheet that you need to override as shown below.
ul{
margin:0;
padding:0;
}
Related
Using CodePen, I've been trying to style a fixed navigation bar with my username on the left side and a list of inline links on the right side. I haven't figured out how to properly format it because after putting the h1 or p element with my username, the list of links aren't even within the colored div that they're held in.
My question is: how do I format my navigation bar properly so everything is inline and neatly placed without covering up the next div while in the fixed position? Also any advice or tips is appreciated.
HTML:
<body>
<div id="fixed">
<p>Springathing</p>
<ul id="nav">
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
<div id="overall">
<div id="about">
</div>
<div id="portfolio">
</div>
<div id="contact">
</div>
<div id="pageinfo">
</div>
<div id="copyright">
</div>
</div>
</body>
CSS:
body {
margin: 0;
padding: 0;
}
#nav {
list-style: none;
text-align: right;
}
#fixed {
background-color: #4F7BF7;
height: 60px;
width: 100%;
position: fixed;
}
#overall {
background-color: #5D6363;
}
#about {
background-color: #A2A2A2;
width: 500px;
height: 500px;
margin: 0 auto;
}
#portfolio {
background-color: #B8BBBB;
border-bottom: 1px solid gray;
width: 500px;
height: 500px;
margin: 0 auto;
}
#contact {
background-color: #B8BBBB;
width: 500px;
height: 500px;
margin: 0 auto;
}
#pageinfo {
background-color: #A2A2A2;
width: 100%;
height: 100px;
}
#copyright {
background-color: #4F7BF7;
width: 100%;
height: 50px;
}
I take it you're new to CSS? If you are, no worries, CSS can be a bit of a pain and takes a little getting used to.
I reproduced what you were trying to do and so here's what I'm going to do.
FIRST - I will provide a screenshot of what I managed to code.
SECOND - I will provide the code you need (which is only a few lines) to get the results I did.
THIRD - I will explain what is going on with the code.
Ok, first here is the screenshot of what my results were:
Ok, now for the code that got me this result...
HTML
<div id="fixed">
<p>Springathing</p>
<ul id="nav">
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
<div id="overall">
<div id="about">
</div>
<div id="portfolio">
</div>
<div id="contact">
</div>
<div id="pageinfo">
</div>
<div id="copyright">
</div>
</div>
</body>
CSS
* {
padding: 0;
margin: 0;
}
body {
margin: 0;
padding: 0;
}
#nav {
list-style: none;
text-align: right;
}
#fixed {
background-color: #4F7BF7;
height: 60px;
width: 100%;
position: fixed;
}
ul#nav {
width: 500px;
margin: auto;
}
ul#nav li {
display: inline-block;
}
ul#nav li a {
text-decoration: none;
}
#overall {
background-color: #5D6363;
}
#about {
background-color: #A2A2A2;
width: 500px;
height: 500px;
margin: 0 auto;
}
#portfolio {
background-color: #B8BBBB;
border-bottom: 1px solid gray;
width: 500px;
height: 500px;
margin: 0 auto;
}
#contact {
background-color: #B8BBBB;
width: 500px;
height: 500px;
margin: 0 auto;
}
#pageinfo {
background-color: #A2A2A2;
width: 100%;
height: 100px;
}
#copyright {
background-color: #4F7BF7;
width: 100%;
height: 50px;
}
And now for an explanation...
First of all, you will notice that I didn't change your HTML at all. What you needed all had to do with the CSS.
Basically I did 2 things. The first thing was I provided a little snippet of code to do a "soft browser reset", because I don't know what you're getting on your screen, what browser you are using, etc. The soft reset gives me some equal footing (and you) to be able to produce as nearly the same results from each other as possible.
The second thing I did was focus in on you "ul" element. I gave it the following:
same width as your other portfolio div elements
a margin of auto for the "ul" element so that it would be centered
I gave the "li" elements a display of in-line so that they would line up next to each other
I gave the "a" elements a text-decoration of none to get rid of the underlines
And there you have it. I hope that helps!
Lastly, I would recommend an exercise. What I did to learn CSS better/faster was, aside from youtube and online tutorials, I used "inspect element" from Google Chrome to look at simple websites and then I copied what I saw and found out WHY they did those things. I would also try to find templates and reverse engineer them. Like I said, it takes some time but it's worth it!
Good luck!
You're missing three things here:
Your header's <p> tag needs display: inline-block.
Your navigation <ul> needs to float: right.
Your navigation list item <li> tags need to have display: inline-block.
I've updated your code to include these three additions, and have created a new fiddle demonstrating what I believe you're looking for here.
Note that you also might want to add a bit of margin-right to #nav, and a bit of margin-left to #fixed p.
Hope this helps! :)
You could do a couple of things here.
Display the P and #nav as inline-block. And float the #nav right.
You can also remove the height: 60px so that the content controls the height.
body {
margin: 0;
}
#nav {
list-style: none;
text-align: right;
float: right;
margin: 0;
}
#fixed {
background-color: #4F7BF7;
height: 60px;
width: 100%;
position: fixed;
}
#overall {
background-color: #5D6363;
}
#about {
background-color: #A2A2A2;
width: 500px;
height: 500px;
margin: 0 auto;
}
#portfolio {
background-color: #B8BBBB;
border-bottom: 1px solid gray;
width: 500px;
height: 500px;
margin: 0 auto;
}
#contact {
background-color: #B8BBBB;
width: 500px;
height: 500px;
margin: 0 auto;
}
#pageinfo {
background-color: #A2A2A2;
width: 100%;
height: 100px;
}
#copyright {
background-color: #4F7BF7;
width: 100%;
height: 50px;
}
p,
#nav {
display: inline-block;
}
<div id="fixed">
<p>Springathing</p>
<ul id="nav">
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
<div id="overall">
<div id="about">
</div>
<div id="portfolio">
</div>
<div id="contact">
</div>
<div id="pageinfo">
</div>
<div id="copyright">
</div>
</div>
You could do other things such as give the header a bit of padding and also display the #nav li inline-block if you want them next to each other rather than listed.
I'm kind of a beginner using CSS3 and I'm trying to center a li tag that contains a SVG object.
I want the SVG object to appear centered while the other li tags float to the left and right.
Also, the SVG object is bigger than the other li, I'd like to align all the li so the bottom of the SVG is at the same height as the other li.
Any tips on how to do that ?
Thanks !
* {
margin: 0;
padding: 0;
}
.container {
position: relative;
background-color: red;
height: 200px;
}
ul {
list-style: none;
background-color: red;
position: absolute;
bottom: 0;
width: 100%;
}
ul li {
background-color: yellow;
display: inline-block;
float: right;
}
ul li:first-child {
float: left;
}
ul li.svg {
float: center;
}
<div class="container">
<ul>
<li>Title</li>
<li class="svg"><object id="svg" type="image/svg+xml" data="https://la-cascade.io/content/images/2015/06/kiwi.svg" width="20%"></object></li>
<li>Project</li>
<li>Project</li>
<li>Project</li>
</ul>
</div>
How about targeting the object #svg ?
Try a text-align: center; for the containing li tag. Works in Safari and Chrome.
I tried to take off the SVG object and it looks like I can't even get the li tag to be centered:
* {
margin: 0;
padding: 0;
}
.container {
position: relative;
background-color: red;
height: 200px;
}
ul {
list-style: none;
background-color: red;
position: absolute;
bottom: 0;
width: 100%;
}
ul li {
background-color: yellow;
display: inline-block;
float: right;
}
ul li:first-child {
float: left;
}
ul li.svg {
float: center;
text-align: center;
}
<div class="container">
<ul>
<li>Title</li>
<li class="svg">Example</li>
<li>Project</li>
<li>Project</li>
<li>Project</li>
</ul>
</div>
for this you can simply add this code to your css
ul li.svg {
text-align: center;
}
very simple . but i seen you use incorrect value for "float"
float:center ;
in css float can be
float:right;
or
float :left;
hope this can help
Here's a try with "title" (the first item) floating on left and all generic items on right, due to a margin-left as wide as 2 columns.
Columns have similar but not equal heights by fixing line-height to 1.5 and a multiple of latter. That means you must know the number of items to set height of title with this quick solution.
Codepen: http://codepen.io/PhilippeVay/pen/ORqQoo
Note on semantics: a title should be a h1-h6 element just before this list. If you had previously on your page a h1, than it would be a h2 followed by that list.
/* (Codepen normalize and Autoprefixer are ON) */
.container {
position: relative;
background-color: red;
min-height: 200px;
}
ul {
list-style: none;
width: 100%;
padding-left: 0;
}
li {
width: 33.33%;
}
li:nth-child(n+3) {
margin-left: 66.67%;
line-height: 1.5;
background-color: yellow;
}
li:first-child {
float: left;
line-height: 4.5;
text-align: center;
background-color: tomato;
}
li.svg {
float: left;
vertical-align: top;
background-color: lightblue;
}
<div class="container">
<ul>
<li>Title</li>
<li class="svg"><object id="svg" type="image/svg+xml" data="https://la-cascade.io/content/images/2015/06/kiwi.svg" width="20%"></object></li>
<li>Project</li>
<li>Project</li>
<li>Project</li>
</ul>
</div>
I am trying to create a header that contains an image along with links that will act as a nav menu for users to navigate.I want the layout to look something like this.
However, I cant seem to get the alignment of the nav menu right to vertically align right above the underline in the header.
<header>
<div>
<img id="headerimage" src="" />
</div>
<nav id="headernav">
<ul id="list">
<li class="menuitem">
Link1
</li>
<li class="menuitem">
Link2
</li>
</ul>
</nav>
</header>
CSS:
html, body {
height: 100%;
background-color: #cccccc;
margin: 0;
}
#header {
border-bottom: 2px solid black;
}
header {
margin: 0;
background-color: #cccccc;
}
height: 5%;
width: 100%;
}
.menuitem {
display: inline;
float: right;
vertical-align: top;
margin-right: 2%;
}
#headerimage {
width: 36px;
height: 36px;
margin-left: 3%;
vertical-align: middle;
}
How do I keep the links to the right of the page along with moving them above the border? Any help would be greatly appreciated.
Your CSS snippet has some typos, it probably should be:
html, body {
height: 100%;
background-color: #cccccc;
margin: 0;
}
header {
margin: 0;
background-color: #cccccc;
height: 5%;
width: 100%;
border-bottom: 2px solid black;
}
.menuitem {
display: inline;
float: right;
vertical-align: top;
margin-right: 2%;
}
#headerimage {
width: 36px;
height: 36px;
margin-left: 3%;
vertical-align: middle;
}
So you need to correct that.
Having a header that is 5% of the height of the page doesn't make a great deal of sense to me, and because the menuitem items are floated right, they don't have any block effect on the header content.
If you gave the header a fixed height that was big enough, e.g. height: 80px; then it would display as you want.
EDIT:
An alternative is to give the menuitems a relative position, then offset the top by the height of the image in the header (it's the only element with a fixed height), and apply the border to the div enclosing the header image (see http://codepen.io/raad/pen/oyncv):
HTML
<header>
<div class="imagecontainer">
<img id="headerimage" src="" />
</div>
<nav id="headernav">
<ul id="list">
<li class="menuitem">
Link2
</li>
<li class="menuitem">
Link1
</li>
</ul>
</nav>
</header>
CSS
html, body {
height: 100%;
background-color: #cccccc;
margin: 0;
}
header {
margin: 0;
background-color: #cccccc;
height: 5%;
width: 100%;
}
.imagecontainer {
border-bottom: 2px solid black;
}
.menuitem {
position: relative;
top: -36px;
display: inline;
float: right;
margin-right: 2%;
}
#headerimage {
width: 36px;
height: 36px;
margin-left: 3%;
vertical-align: middle;
}
Add this to your CSS:
#headernav {
float: right;
}
#headernav ul li {
display: inline;
}
This will float the nav to the right and display your list inline so each bullet is side-by-side.
JSFiddle: http://jsfiddle.net/tsukasadt/puf0ws3x/
Please see the following fiddle: http://jsfiddle.net/nfpzzao7/
<header>
<div class="headerimage-container">
<img id="headerimage" src="" />
</div>
<nav id="headernav">
<ul id="list">
<li class="menuitem">
Link1
</li>
<li class="menuitem">
Link2
</li>
</ul>
</nav>
</header>
html, body {
height: 100%;
background-color: #cccccc;
margin: 0;
}
#header {
border-bottom: 2px solid red;
}
header {
margin: 0;
background-color: #cccccc;
}
height: 5%;
width: 100%;
}
.menuitem {
display: inline;
float: right;
vertical-align: top;
margin-right: 2%;
}
#headerimage {
width: 36px;
height: 36px;
margin-left: 3%;
vertical-align: middle;
}
.headerimage-container {
display: inline-block;
}
#headernav {
display: inline-block;
}
#headernav li {
float: left;
margin-right: 10px;
}
I have a vertical navigation menu, with a picture next to it. So now the navigation menu and the pic are vertically aligned to the top. I want it to be bottom, like, the navigation menu to vertically finish at the same point where the image does. How do I go about doing this with using absolute positioning?
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Portfolio</li>
<li>Reviews</li>
</ul>
<img src="pic.jpg">
CSS:
ul {
float: left;
text-align: right;
}
ul li {
padding-top: 5px;
}
ul li a {
background: yellow;
display: inline-block;
padding: 10px 35px;
font-size: 20px;
}
img {
width: 230px;
height: auto;
float: left;
}
I don't want to use absolute positions, because the image is supposed to interconnect with the navigation menu (It's supposed to be a png picture of a guy with the buttons coming from behind him) so I'm worried it might mess things up if someone had a different font sizing in their browser.
You can use display: table; to achieve this.
Create a wrapping element for the ul and img and give it display: table;. ul and img should have display: table-cell; vertical-align: bottom; then. You don't need float: left; on ul or img either if you do it this way.
Demo: http://jsfiddle.net/xq6SY/
HTML
<div class="wrapper">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Contact
</li>
<li>Portfolio
</li>
<li>Reviews
</li>
</ul>
<img src="pic.jpg">
</div>
CSS
.wrapper {
display: table;
}
ul {
display: table-cell;
text-align: right;
vertical-align: bottom;
}
ul li {
padding-top: 5px;
}
ul li a {
background: yellow;
display: inline-block;
padding: 10px 35px;
font-size: 20px;
}
img {
width: 300px;
height: auto;
display: table-cell;
vertical-align: bottom;
}
try this code even though I pressed it to the bottom of the screen)) DEMO
<div class="page-wrap">
</div>
<footer class="site-footer">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Portfolio</li>
<li>Reviews</li>
</ul>
<img src="http://placehold.it/350x300">
</footer>
* {
margin: 0;
}
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
/*height: 142px; */
}
.site-footer {
background: white;
}
ul {
/*float: left;*/
text-align: right;
display:inline-block;
}
ul li {
padding-top: 5px;
}
ul li a {
background: yellow;
display: inline-block;
padding: 10px 35px;
font-size: 20px;
}
img {
width: 230px;
height: auto;
display:inline-block;
vertical-align:bottom;
}
You can do this:
fiddle
css
ul, img { display:inline-block; vertical-align:bottom;}
** Important: Don't forget to remove your floats, and add padding:0; margin:0; to your UL.
(look at the fiddle)
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.