I am having difficulties getting my footer nav to display inline with my footer title. Here is a fiddle showing what I have done... https://jsfiddle.net/nkzsufov/
I have tried making this absolute/relative
.footerNav {
margin-top: 35px;
font-size: 1.5em;
font-family: Oswald;
float: left;
position: absolute;
}
I have added float: left; to both the footerNav and footerNav li.
What am I doing wrong?
#footer_menu ul {
/* margin: 0px 30px; */
padding: 10px 30px;
list-style-type: none;
text-decoration: none;
display: inline;
}
#footer_menu ul li {
margin: 0 0;
padding: 5px 0;
display: inline-block;
color: white;
clear: both;
}
hope this will solve it
I modified two css classes from your JSFiddle and I guess I achieved what you wanted. I only added float:left and removed position attribute.
.footerTitle {
font-size: 2.2em;
font-family: Oswald;
font-weight: bold;
margin-top: 33px;
float:left;
}
.footerNav {
margin-top: 35px;
font-size: 1.5em;
font-family: Oswald;
float: left;
}
Related
Basically I created one component which has just a title and a color for background that should cover the whole page (but it's not, apparently there's a top margin and I don't know how to remove it) and also I created a componenent to be the footer. This component should stay at the botom of the page and it should go down with the addition of content, but it doesn't, the content overlaps it and even crosses it. How can I fix it?
Background CSS:
<style scoped>
*{
margin: 0%;
padding: 0%;
}
.background{
position: relative;
height: 88vh;
background-color: #3B3B3B;
}
.title{
border: 1px solid #707070;
border-left: none;
border-right: none;
}
.title h2{
text-align: left;
color: #B16DFF;
padding-top: 0.8em;
font-size: 2em;
padding-bottom: 0.5em;
margin-left: 1.5em;
font-weight: 600;
}
Footer CSS:
<style scoped>
.container{
width: 100%;
margin: 0%;
position: absolute;
bottom: 0%;
background-color: #232323;
}
.container h2{
font-weight: bold;
color: #B16DFF;
font-size: 1.5rem;
padding-top: 1.1em;
}
.container #text{
position: relative;
float: left;
padding-left: 5em;
text-align: justify;
padding-bottom: 2em;
}
.container p{
font-weight: 600;
font-size: 0.8rem;
color: white;
}
.container #title{
padding-bottom: 0.4em;
}
.container #description{
padding-bottom: 1.3rem;
}
.container #images{
position: relative;
padding-top: 3em;
float: left;
padding-left: 5em;
}
.container ul li{
display: inline-block;
padding-left: 2em;
}
On your background css, you have a scoped style so it doesn't apply to everything.
Also when you use 0 as value for a css property, you don't need to specify units.
Creating a navigation bar. How do i make the whole area around the text not just the text clickable? I put display: block; and it still does not work. Now I'm just writing anything so i could post the question. Thank you!
.containter{
width: 80%;
margin: 0 auto;
}
header{
background: deeppink;
}
header::after{
content:'';
display: table;
clear: both;
}
.logo{
float: left;
padding: 10px 0;
margin-left: 5px;
}
nav{
float: left;
}
nav ul{
margin:5px;
padding:0;
list-style: none;
overflow: hidden;
}
nav li{
float: left;
display: block;
margin-left: 100px;
padding-top: 27px;
}
nav a{
text-decoration: none;
color: white;
text-transform: uppercase;
font-family: times new roman;
text-align: center;
display: block;
}
nav a:hover{
background-color: #C71585;
}
try to change to these two
nav li{
float: left;
display: block;
}
nav a{
text-decoration: none;
color: white;
text-transform: uppercase;
font-family: times new roman;
text-align: center;
display: block;
margin-left: 100px;
padding-top: 27px;
}
For making the area clickable you can use pointer events property of css like
div {
pointer-events: none;
}
div{
pointer-events: auto;
}
div{
pointer-events: all;
}
Can try it out if it works for you none will disable the mouse click where as auto and all will allow the mouse click..!!
I'm trying to let my menu stick to the bottom of my header. I've already tried getting it down, with deleting the float's, adding some, playing with padding/margin (this isn't an option seems to me?
<div id="header">
<div id="logo">
<h1>blah</h1>
<h3>Blah</h3>
</div>
<div id="menu">
<ul>
<li>qsdfqsdfqsdf</li>
<li>qsdfqdsfqsdf!</li>
<li>qdsf</li>
<li>qdsf</li>
</ul>
</div>
</div>
CSS:
/** HEADER */
#header {
height: 125px!important;
background: #000;
position: fixed;
top: 0;
width: 100%;
}
/* Logo */
#logo
{
float: left;
width: 250px;
padding: 20px 0px 0px 50px;
text-transform: uppercase;
}
#logo h3{
color: #fff;
margin-left: 1em;
font-size: 1em;
}
#logo h1
{
padding: 5px 10px 0px 0px;
}
#logo h1 span, #logo h3 span{
color: #000;
}
#logo h1 a
{
text-decoration: none;
font-size: 1.5em;
font-weight: 300;
color: #FFFFFF;
}
#logo p
{
display: block;
margin-top: -10px;
padding: 0px 0px 0px 0px;
letter-spacing: 1px;
font-size: 1.2em;
color: #FFFFFF;
}
#logo p a
{
color: #FFFFFF;
}
/* Menu */
#menu{
float: right;
width: 600px;
margin: 2em 2em 0 0;
}
#menu ul{
float: right;
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
position: relative;
display: inline-table;
}
#menu li
{
float: left;
}
#menu a
{
display: block;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
font-size: 18px;
font-weight: 300;
color: #FFFFFF;
padding: 1em;
text-decoration: none;
}
#menu a:hover{
color: #000;
text-decoration: none;
background: #fff;
}
#menu ul li {
float: left;
}
#menu ul li:hover {
}
Here an example:
http://jsfiddle.net/2wmSt/
Almost there mate, just position the menu absolute to the bottom of the header.
#menu{
position:absolute;
bottom:0;
right:0;
}
jsfiddle example
My website is on the local server right now however this will be a simple fix for those of you who know whats it's called.
I'm trying to get these lists (bordered in white) to float the the far left in the available space of the footer(bordered by black).
This is my CSS
#footer { width: 100%; height: 503px; background: url(img/FOOTER-bg.jpg) repeat-x; background-color: #821d20; position: relative; top: 100px;/*border: 1px solid #0C0;*/}
#footer a { text-decoration: underline; color: #c7bd89; }
#footer a:hover { text-decoration: none; color: #fff; }
#footer h6 { background: url(img/FOOTER-HR-BG.jpg) left center repeat-x; text-align: left;}
#footer h6 span { background: #8e2023; display: inline-block; padding-right: 5px; }
.footer-widgets { width: 960px; height: 503px; margin: 0px auto; padding: 0px; border: 1px solid #000;}
.footer-widgets li { width:280px; height: auto; list-style-image: none; list-style-position: outside; list-style-type: none; float: left; color: #fff; padding: 13px; margin-right: 10px; /*border: 1px solid #fff;*/ }
.footer-widgets li ul {color: red;}
.footer-widgets li ul li {color: #fff; margin-left: -50px; margin-top: -15px;}
.footer-widgets li p { font-size: 1em; line-height: 18px; text-align: left; /*border: 1px solid red;*/ }
.footer-widgets li h2 { font-size: 1.4em; font-weight: normal; letter-spacing: 1px; line-height: 30px; text-align: left;}
.footer-archives { position: relative; top: -210px;}
.footer-widgets li.last { position: relative; top: -210px;}
h6 { font-family:Verdana, Geneva, sans-serif; font-size: 1.2em; font-weight: normal; letter-spacing: 1px; margin-top: 15px; margin-bottom: 10px; color: #fff;}
.footer-copyright { position: absolute; width: 900px; left: 50%; margin-left: -450px; top: 400px; height: 100px; font-family: Tahoma, Geneva, sans-serif; line-height: 22px; font-size: 1em; color: #fff; text-align: center; text-transform: uppercase; }
.footer-copyright a { color: #fff !important; text-decoration: none !important; }
.footer-copyright a:hover { color: #c7bd89; text-decoration: underline !important; }
.copyright { margin-top: 27px; text-transform: uppercase; display: block; color: #cc9798;}
.copyright a { color: #cc9798 !important; text-decoration: underline; }
.footer-one, .footer-two, .footer-three, .footer-four { border: 1px solid #fff; float: left;}
I have the containing footer and within the 900px x 503px container I wish that all lists float left (and under each other if it's small enough). So "Archives" would flow under "Follow Us" and if I were to put a search bar under "Testimonials" it would fit.
What can I do with my CSS to have this happen?
Why no just create a column for each side (left, center, right) and simulate it that way, well atleast I think this is what you are trying to achieve
Fiddle http://jsfiddle.net/eEwdk/
Theres another workaround that would consist in making each li element absolute positioned and calculating it's position (yeah I know it's sound redundant)
As I understand it, you want each of the li elements underneath one another. To do that you want to float the ul element to the left, not each individual li element.
Here you can see the code: http://jsfiddle.net/LQSK3/1/
I can't get display: inline; working there for every li element.
Also got the problem width the line.png image, as it's height is the same as the font height, I want it to has 35px height with margin left and right set to 5px.
Where is the problem?
You need to update your style sheet. Please add this new style:
#menu {
position: relative;
clear: both;
top: -3px;
background-color: coral;
border: 1px solid black;
width: 800px;
height: 35px;
float:left;
}
li { display: inline;float:left; }
#menu ul {
position: absolute;
font-family: Century Gothic, sans-serif;
font-size: 14px;
list-style-type: none;
padding: 0;
margin: 9px 0 0 123px;
width: 649px;
height: 39px;
color: #FFF;
float:left;
}
a { font-weight: bold; color: red; text-decoration: none; }
a:hover { text-decoration: underline; }
#menu a {
background: url('http://i.imgur.com/rzNj0.png') top right no-repeat;
width: 65px;
height: 18px;
float: left;
margin: 0px 5px;
}
You need to add float: left; to menu div,ul,li and a . Also should set width and height and margin of the a tag.
Here is a working sample : http://jsfiddle.net/YjeBs/
Hope this helps :)
EDIT:
If you want your line to extend from top to bottom of the menu div you can change your styles to:
#menu {
position: relative;
clear: both;
top: -3px;
background-color: coral;
border: 1px solid black;
width: 800px;
height: 35px;
float:left;
}
li {
float: left;
height: 35px;
display:inline;
}
#menu ul {
color: #FFFFFF;
float: left;
font-family: Century Gothic,sans-serif;
font-size: 14px;
height: 35px;
list-style-type: none;
margin: 0 0 0 123px;
padding: 0;
position: absolute;
width: 649px;
}
a { font-weight: bold; color: red; text-decoration: none; }
a:hover { text-decoration: underline; }
#menu a {
background: url("http://i.imgur.com/rzNj0.png") no-repeat scroll right top transparent;
float: left;
height: 29px;
margin: 0 5px;
padding-top: 8px;
width: 65px;
}
Hope this is you want :)
just change li { diplay: inline; } with li { display: inline; } it works.