I am trying to clone google's home page.I Started from the footer of the page and got stuck at the alignment of the links in the footer.
my html code:
<div class="footer">
<hr >
<footer >
Advertising
Business
About
Privacy
Terms
Settings
</footer>
</div>
my css code :
.footer{
position: absolute;
bottom: 0;
left: 0;
width: 100%
}
footer{
background-color: #F4F6F7;
height: 45px;
}
hr{
border-color: #CCD1D1;
margin-bottom: 0px;
}
.advertising, .business, .about, .privacy, .terms, .settings{
color: #909497;
font-size: 1.2em;
margin-top: 11px; //THIS LINE.
}
.advertising, .business, .about{
margin-left: 40px;
}
.privacy, .terms, .settings{
margin-right: 40px;
float: right;
}
can anyone tell me, why the line "margin-top : 11px" is not applied to the first 3 links in the footer(advertising,business,about). Screenshot of footer:
Although the above answer will work, a better solution is this:
.footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%
}
footer {
background-color: #F4F6F7;
height: 45px;
}
hr {
border-color: #CCD1D1;
margin-bottom: 0px;
}
.align-left {
float: left;
}
.align-right {
float: right;
}
.footer-links {
list-style-type: none;
}
.footer-links li {
display: inline;
}
.footer-links li a {
color: #909497;
font-size: 1.2em;
margin: 11px 20px 0px;
}
<div class="footer">
<hr/>
<footer>
<ul class="footer-links align-left">
<li>Advertising</li>
<li>Business</li>
<li>About</li>
</ul>
<ul class="footer-links align-right">
<li>Privacy</li>
<li>Terms</li>
<li>Settings</li>
</ul>
</footer>
</div>
By putting the links into separate menus, it allows you to very quickly add and remove links in the future without messing around with CSS classes.
This fixes any margin errors you are having as well, as we're declaring that every anchor tag has a margin-top of 11px. You'll also notice instead of having 40px margin-left and margin-right, I've set each side to 20px which will give the same effect.
You can also use the .align-left and .align-right classes elsewhere in your HTML instead of declaring it in CSS for every class.
There's no need to give each link it's own class when they all have the same style. But if you wanted to highlight a particular link you'd naturally just add a .highlight class onto one of the anchor tags and specify the styling in CSS.
This method also gives full browser support. Flexbox is a little temperamental on IE as I write this.
Hope this helps!
You need to add float:left to your first three links, as you have applied float:right on the last three.
.advertising, .business, .about{
margin-left: 40px;
float:left;
}
I ran it through codepen,it worked when I applied the margin 11px to all elements using the footer as a selector
I also would recommend using flexbox, its alot easier to use, here is an example
`http://codepen.io/HTMLanto/pen/gmNedQ`
Cheers !
Related
So im making a website for a school project and all was hunky dory until i tried to put a paragraph element in and it displays above the title text behind the background color
.container {
width: 80%;
margin: 0;
padding: 0;
}
#logotext {
float: left;
font-family: 'Doppio One';
margin-left: 25px;
}
nav {
float: right;
}
#nav {
list-style-type: none;
text-decoration: none;
margin-top: 35px;
}
ul li {
display: inline;
}
li a {
text-decoration: none;
color: white;
}
li a:hover {
color: #fc9516;
}
.darkwrap {
background-color: #414a4c;
position: fixed;
overflow: hidden;
}
.active {
color: #22cc25;
}
#clock {
position: absolute;
top: 0;
right: 0;
margin-top: 25px;
margin-right: 25px;
font-family: Rajdhani;
font-size: 30px;
}
<div class="container darkwrap">
<div id="logotext">
<h1>JF Web Design</h1>
</div>
<!-- Navigation Bar -->
<nav>
<ul id="nav">
<li> Page 1 </li>
<li> About </li>
<li> Page 3 </li>
</ul>
</nav>
</div>
</header>
<span id="clock"></span>
<p>
Hello
</p>
<footer></footer>
i usedchrome to highlight the faulty element so its clear whats happening here its literall positioned at the top behind the bg color
Console Highhlighted element
.darkwrap is position: fixed.
This takes it out of normal flow and locks its position relative to the viewport.
The rest of the content is laid out as normal as if the .darkwrap element didn't exist … so it ends up covered up by it.
You could use margins to compensate for the space covered up by .darkwrap when the viewport is scrolled to the top. I would simply avoid using position: fixed in the first place: The benefits of having the menu on screen all the time very rarely outweigh the drawback of using up all that vertical space all the time.
If you use float: left and float:right please remember to add clear:both to the next element on the website. Here is fixed code:
https://codepen.io/anon/pen/jKRqLz
i'm pretty new to css and html and trying to make a site to work on improving and learning. I've been searching and cant figure out how to fix my menu in the sidebar, to me it looks like the li's in the ul are floating to the right for some reason, heres my code:
also Jsfiddle Link:
https://jsfiddle.net/h2bpxcxe/
#side-bar #recents {
width: auto;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#recents h3 {
text-align: center;
padding-top: 4px;
}
#recents ul {
margin-top: -10px;
list-style-type: none;
text-align: center;
}
#recents ul li {
padding: 2% 0px;
border-bottom: 1px solid black;
background: grey;
Thanks if somone can help! :)
UL-elements have a padding-left by default.
You need to reset this padding which will center your li-elements in your sidebar.
#recents ul {
margin-top: -10px;
list-style-type: none;
text-align: center;
padding-left:0px; //Adding this will center your LI's
}
FIDDLE
a tip for when dealing with issues like this. Look at the element in your browsers developer tools. Padding and Margin will always be shown clearly there.
I feel there is also an issue with the positioning of the sidebar's list/ul element.
If you apply:
#recents ul {
position:absolute;
}
to your CSS, it will preclude the list element from overflowing the parent, which is the case with your current code. Here's a jsfiddle: https://jsfiddle.net/46t4f5zs/
just do like this
<div id="recents">
<ul><h3>Recent Posts</h3>
<li>Recent One
</li>
<li>Recent Two
</li>
<li>Recent Three
</li>
<li>Recent Four
</li>
</ul>
</div>
I'm trying to create nav bar similar to that of Uber's site. Where there's a menu button on the left, logo in the center, and then log in and sign up are on the right.
I used and div container="pull-right" and still couldn't get the Title to be center. The buttons won't be stylized much more than what they are since they will be on a white background.
<div class="nav">
<div class="container">
<ul>
MENU</button></li>
TITLE</button></li>
SIGN UP</button></li>
LOG IN</button></li>
</ul>
</div>
</div>
.nav{
color: #5a5a5a;
font-size: 15px;
font-weight: normal;
padding: 15px 15px 5px 5px;
word-spacing: 3px;
}
.nav li {
display: inline;
}
.nav button {
background-color: Transparent;
background-repeat:no-repeat;
border: none;
cursor:pointer;
overflow: hidden;
outline: none;
}
.nav a{
color: inherit;
}
Here's my Jsfiddle: https://jsfiddle.net/tokyothekid/r19y23ep/1/
you can try this fiddle
demo
in this i have manage the structure of your li and as per your description i make a design i hope it may help you
.col1
{
margin:0;
padding:0;
float:left;
width:50%;
}
Quick answer
If you want something like the website for Uber, you probably need to separate the Menu from the buttons on the right side.
Other notes
Also, HTML5 has specified special tags so code is more readable and organized, such as the <nav> tag to hold your main menu. <div> doesn't communicate the purpose of the container.
To do what you want, here is a to-do list:
fix your bugs (<a href="somewhere"<li><button>foobar</button></li></a> actually is an error because of the lack of right bracket > at the end of your opening <a> tag)
separate your elements into a menu, a title, and a couple of user account buttons
The code
Here is a good example of how you could restructure your HTML:
<h2 class="top-title">Title</h2>
<nav>
<button id="toggle-menu">Menu</button>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</nav>
<div class="user-buttons">
<button>Log in</button>
<button>Sign up</button>
</div>
This is a quickly hacked bit of CSS you might use to start with:
h2 {
display: inline-block;
width: 100vw;
text-align: center;
margin: 0;
position: absolute;
z-index: -1;
}
nav {
float: left;
}
nav ul {
list-style-type: none;
padding: none;
position: absolute;
}
nav ul a {
text-decoration: none;
text-transform: uppercase;
color: inherit;
}
div.user-buttons {
float: right;
}
Add some Javascript, and voila:
$(function() {
$("nav ul").hide();
$("#toggle-menu").click(function() {
$("nav ul").toggle();
});
});
JSFiddle example.
So, I'm working on quickly building a website theme (Wordpress) with the aid of Twitter bootstrap, and I'm running into a problem.
I've got a header thrown together, and I've got this weird gap going on inside the "pull-right" section, not sure why:
I'm not sure what the deal is, I want them sitting on the line right at the same height of the text on the left.
Anyway, I've got the following relevant sections of code:
(HTML for header section):
<!-- Header -->
<div class="row header-container">
<div class="col-md-8 col-md-offset-2">
<div class="pull-left">
<h3>CharlesBaker.net</h3>
</div>
<div class="pull-right">
<ul>
<li>Test1</li>
<li>Test2</li>
<li>Test3</li>
</ul>
</div>
</div>
</div>
(CSS for the same section):
.header-container {
padding-top: 50px;
background-color: #c0c0c0;
border-bottom: 5px solid #880000;
}
.header-container h3 {
margin: 0;
padding: 0;
font-family: 'Montserrat', serif;
}
.header-container ul {
margin: 0;
padding: 0;
}
.header-container ul li {
display: inline;
margin: 0;
padding: 0;
}
.header-container a {
padding: 3px;
color: black;
}
.header-container a:hover {
text-decoration: none;
background-color: #880000;
color: white;
}
Not sure what the issue is, unless it's related to the fact that I'm using a tag instead of just styling a <span> or something, but since I removed the padding/margin using CSS, I wouldn't think that would be the problem.
Any help would be great. The idea is that when I hover over the links on the right, that they're enclosed in a scarlet colored box that "extends" from the 5px bottom border.
Thanks in advance!
Are you looking for this?
You need to set your .header-container as display: inline-block to align all elements inside. Therefore, you need to float your pull div elements (float and left).
Just one last change, set the width size of your header: I set 100%, but you can set whatever you like :)
CSS:
.header-container {
padding-top: 50px;
background-color: #c0c0c0;
border-bottom: 5px solid #880000;
width: 100%;
display: inline-block;
}
.pull-left {
float: left;
}
.pull-right {
float: right;
}
There is a particular line-height property for h3 tag with bootstrap.
h1, h2, h3 {
line-height: 40px;//line 760
}
So you will have to add style to negotiate this additional height.
Also another set for your ul as :
ul, ol {
margin: 0 0 10px 25px; //line 812
}
Solution :
Over-ride the ul margin as follows :
.pull-right ul{
margin: 0;
}
Over-ride the line-height for the h3 as follows :
.pull-left h3{
line-height:20px;
}
First one is pretty straight forward and gives you correct alignment straighaway. Second solution will need you to work some more with tweaking the negative-margins for .pull-right.
Debugging URL : http://jsbin.com/oToRixUp/1/edit?html,css,output
Hope this helps.
I am doing a project where we are learning how to design the google homepage. My code is here: http://jsfiddle.net/HgpQW/ . I realize that my work is far from complete, but I am hoping somebody can just help me with one thing: why can't I expand the "SIGN IN" element? I have tried to do so with setting width and height in the css, but it has no effect.
<header>
<ul id="headerlist">
<li>+You</li>
<li>Gmail</li>
<li id="grid">
<li id="sign_in">
<div id="sign_in">
<span>SIGN IN</span>
</div>
</li>
</ul>
</header>
__
body {
font-family:sans-serif;
font-size: 12px;
letter-spacing: .5px;
}
header {
position: absolute;
right: 0;
top: 0;
margin-top: 11px;
}
ul {
list-style-type: none;
}
li, li div {
display:inline
}
#headerlist li {
padding-right: 6px;
}
#sign_in {
display:block;
background-color: #DA4531;
color: white;
height: 35px;
width: 80px;
}
EDIT: the solution was inline-block on the #sign_in li
<div> elements normally have display:block; applied but you must have somehow changed this to display:inline;
If you didn't do this yourself, it might have been a boilerplate CSS that you used that caused this.
To be able to adjust the width, change the display to:
display:block;
or this will also work and may be preferable if you previously found a need to remove the default block display:
display:inline-block;
Another possibility could be that your div is contained within another div and that parents divs overflow is set to hidden.
Without a link to a specific fiddle, it's hard to answer your question specifically. Just from your description, I'm guessing it might need this css:
display: block;