HTML:
<footer>
<div class="foot">
<ul>
<span class="facebook"></span>
<span class="instagram"></span>
</ul>
</div>
</footer>
CSS:
.facebook {
display:block;
background-image:url("../images/facebook.png");
height:64px;
width:64px;
}
.instagram {
display:block;
background-image:url("../images/instagram.png");
height:64px;
width:64px;
}
.social {
height:64px;
width:64px;
display:inline-block;
position:relative;
margin:0 auto;
}
footer {
height:75px;
width:inherit;
bottom:0;
position:fixed;
}
.foot {
text-align:center;
}
The way I'm going about it could possibly be the wrong way. Any direction/advice would be great. I've tried using z-index and other properties but just nothing is working. I kinda wonder if it has to do with positioning/display inline.
A <span> should not contain any display:block elements anyway, it was designed for inline content although you can use it your way. Try use the <img> tag instead.
And wrap all your lines inside lis because you are using an ul
The links worked for me with no trouble.
You don't even need the span. You can move the class to the <a and have either 2 (social & facebook), or just make it to one css each with the inline and margin.
A span can have display:block property, but why you add span if you have your link ? I cleaned up your html :
HTML
<footer class="foot">
<ul>
<li></li>
<li></li>
</ul>
</footer>
and CSS
.social-facebook {
background-image:url("../images/facebook.png");
}
.social-instagram {
background-image:url("../images/instagram.png");
}
.social {
height:64px;
width:64px;
display:block;
margin:0 auto;
}
.foot {
height:75px;
width:inherit;
bottom:0;
position:fixed;
text-align:center;
}
I removed properties repetition and add a little bit of OOCSS :)
Related
Hello my wonderful peeps.
The heading "whatever" overlaps on my list.
I want the list to appear after the heading.
<div style="width:1024px;height=auto;position:absoulte;min-height:768px;">
<div class="heading">
<h1>Whatever</h1>
</div>
<div class="list" id="listID" >
<div style="height:15px;">Nope</div>
<div style="height:15px;">Yes</div>
<div style="height:15px;">Maybe</div>
<div style="height:15px;">Definetely</div>
</div>
<button>Print</button>
<button style="posititon:relative;top:0px;">add</button>
</div>
and this is the css
.heading
{
position:relative;
top:50px;
}
.list
{
position:relative;
min-height:10px;
top:0px;
margin-left:20px;
}
http://jsfiddle.net/zd5n3L5z/
Help me out. Thank you :)
Change top to margin top for the heading
.heading
{
position:relative;
margin-top:50px;
}
.list
{
position:relative;
min-height:10px;
top:0px;
margin-left:20px;
}
Since you dont want to affect the possition in relation to other elements, you don't need to use the relative attribut. So your 'CSS' should look like:
.heading
{
margin-top:50px;
}
.list
{
min-height:10px;
margin-left:20px;
}
This will keep your css clean!
Add display: inline in class .list:
css
.heading
{
position:relative;
top:50px;
}
.list
{
position:relative;
min-height:10px;
top:0px;
margin-left:20px;
display: inline;/*Add display inline*/
}
fiddle
inline This value causes an element to generate one or more inline
boxes.
Also you have a syntax error in your main div container. Is position:absolute no absoulte.
You set the .heading top:50px. What happens here is that this value (50px) is not relative to the .list but to the div it sits in. Simply change the value like this:
.heading
{
position:relative;
}
Don't use position top for ".heading" class
.heading
{
position:relative;
}
.list
{
position:relative;
min-height:10px;
margin-left:20px;
margin-bottom:30px;
}
button{clear:both;}
Trying to vertically align text for the buttons in the middle, however i want entire button are to be a link (not just text) so i stretched the anchor tag, now i cannot vertically align text anymore even if i wrap it in another tag still does not work for some reason.
* {
margin:0;
padding:0;
}
hr {
border:0;
height:1px;
background-color:#000000;
}
ul {
border-spacing:15px;
width:100%;
display:table;
}
li {
display:table-cell;
background-color:#ccc;
height:75px;
text-align:center;
}
a {
width:100%;
height:100%;
display:block;
background-color:#FCF;
text-decoration:none;
opacity:0.5;
}
<ul>
<li>
HOME
</li>
<li>
ABOUT
</li>
<li>
ABOUT<HR/>US
</li>
<li>
NEW<hr/>EVENTS
</li>
</ul>
Key points:
I like to keep buttons auto stretch to the page width like it is now.
I like to have entire button area to be click able not just text.
I like to keep unordered list for menu structure as its semantically correct for menu
http://jsfiddle.net/vWrE8/
Final Result Should look like this http://i.stack.imgur.com/kKEc8.png
In my opinion wrapping text inside anchor tag with div is a way to go and then valign-middle, however i cannot make it work.
Here is one solution that may work for you:
Demo Fiddle
You need to remove the disiplay:block from the anchor tags, and vertically align them throught he li element.
CSS
li {
// other styles here
vertical-align: middle;
background-color:#FCF; //<-move the bg to here
}
a {
// other styles here
// display:block;
// background-color:#ccc;
}
I don't think this is achievable without wrapping the multi-line texts in another element, but once that's done, it's quite straightforward. Assuming that wrapper element is a div, just add
a div {
display:inline-block;
width:100%;
vertical-align:middle;
}
a:before {
content:'';
height:100%;
display:inline-block;
vertical-align:middle;
}
As per http://jsfiddle.net/vWrE8/9/
BadAdviceGuy's solution is good, but given you want whole block to be clickable, you can try fluid padding for the anchor tags. Fiddle
CSS:
a {
width:100%;
height:100%;
display:block;
padding: 50% 0;
text-decoration:none;
opacity:0.5;
}
This is as close as I can get to what you want: http://jsfiddle.net/vWrE8/6/
Only works for one line break, after that it falls apart... =/
* {
margin:0;
padding:0;
}
hr {
border:0;
height:1px;
background-color:#000000;
}
ul {
width:100%;
list-style:none;
}
li {
display:inline-block;
vertical-align:top;
background-color:#ccc;
min-width:110px;
height:75px;
text-align:center;
margin:0px 10px;
}
a {
height:100%;
display:block;
background-color:#FCF;
text-decoration:none;
opacity:0.5;
line-height:2em;
}
a span {
position:relative;
display:block;
line-height:1em;
top:30%;
}
<ul>
<li> <span>HOME<span></li>
<li><span>ABOUT<span></li>
<li><span>ABOUT <HR/>US<span></li>
<li><span>NEW <HR/>EVENTS<span></li>
</ul>
I am trying to make a list with square bullets in different colors with square size independant of the font size.
I need to use font sizes in em or %.
That's my best try so far: http://jsfiddle.net/3GMjp/29/
<ul>
<li>
<div>
<span class='li_box green'></span>
<span>Element 1</span>
</div>
</li>
<li>
<div>
<span class='li_box red'></span>
<span>Element 2</span>
</div>
</li>
<li>
<div>
<span class='li_box blue'></span>
<span>Element 3</span>
</div>
</li>
<ul>
css:
ul {
padding:0;
margin:0;
}
li {
font-size: 1.5em;
list-style-type:none;
line-height: 2em;
}
.li_box {
float:left;
width:10px;
height:10px;
vertical-align:middle;
margin-right:10px;
}
.red{ background-color:red}
.green{ background-color:green}
.blue{ background-color:blue}
Could someone help me to center the boxes without adding px-measures?
Any working solution (would be appreciated)!
See I have done modification in the CSS and HTML :
Please see URL : http://jsfiddle.net/3GMjp/33/
HTML code:
<li>
<div>
<span class='li_box green'></span>
<span class='spn'>Element 1</span>
</div>
</li>
CSS changes :
ul {
padding:0;
margin:0;
}
li {
font-size: 1.5em;
list-style-type:none;
line-height: 2em;
}
li div {
display:table;
}
.spn{
display:table-cell;
}
.li_box {
display:table-cell;
float:left;
width:10px;
height:10px;
vertical-align:middle;
margin-right:10px;
}
.red{ background-color:red}
.green{ background-color:green}
.blue{ background-color:blue}
I've updated your fiddle here.
If you float an element, it will become a block element, and thus vertical align won't work. The span with the text, unless floated as well, will wrap to the next line.
Inline block seems to work just fine:
.li_box {
display: inline-block;
width:10px;
height:10px;
margin-right:10px;
}
If you're simply looking to center the content of the divs, this should be all you need:
div { text-align: center; }
try to use this:
li {
...
text-align:center;
}
Adding margin top to .li_box will fix your issue.
.li_box {
...
margin-top: 1%;
}
i'm having this really frustrating problem where a thin silver of the color that i'm applying as the a:hover,a:active is appearing outside of where it should. i have an image in absolute positioning right above the menu that is exhibiting this....i could just move the image up one but i want to solve it the correct way....here is my css
.logo
{
width:200px;
height:108px;
position:absolute;
left:5px;
top:10px;
}
#menu
{
position:relative;
top:110px;
padding-top:0px;
clear:both;
}
ul
{
list-style-type:none;
overflow:hidden;
padding:0px;
width:900px;
}
a
{
text-decoration:none;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
font-weight:bold;
text-align:center;
background-color:#ffffff;
padding:3px;
width:120px;
height:auto;
color:#000000;
float:left;
}
a:hover,a:active
{
background-color:#804000;
color:#ffffff;
}
here is my corresponding html:
Sorry, your browser doesn’t support JavaScript!
U4U Test Page
<div class="header">
<img class="logo" src="linktofilehere" alt="U4U Logo" />
</div>
<div id="menu">
<ul>
<li><a href="/" >Home</a></li>
<li>About Us</li>
<li>Programs</li>
<li>US Movement</li>
<li>Sponsorship</li>
<li>Donate</li>
</ul>
</div>
</body>
</html>
i've searched through the help knowledge and couldn't find anything related really....i'm sure it is something simple....any help would be appreciate, i think it might have to do with positioning or not defining the hover area correctly but i'm not sure....i just started learning html and css last week so please be kind!
You will need to create a new style for the 'a' of your image. If you don't, it will use the standard 'a' stylings of your CSS.
Like this :
a.imglink:hover
{
background:none;
}
I'd add a style to remove the background color from linked images - that way you won't run into issues with transparent PNGs etc:
.imglink:hover {
background-color:transparent;
}
I just specifically targetted links inside the list for the background color on hover..
CSS:
#menu > ul > li > a:hover,a:active
{
background-color:#804000;
color:#ffffff;
}
http://jsfiddle.net/cSSU7/
Did this solve your problem?
/* remove the background */
.imglink:hover { background: none; }
/* if you run into specificity issues, be more selective! :) */
a.imglink:hover { background: none; }
/* or remove the padding from just the first a */
a:first-of-type{ padding: 0; }
/* or remove the background from the first link */
a:first-of-type{ background: none; }
DEMO
i have made a toolbar using links placed inside listitems but the problem is that i cant get my toolbar to sit on a "div" placed below it. This is what i want to see.
but this is what am getting in firefoxNotice the space between my 'toolbar' and the div below it. Questionswhy is the code displaying properly in jsfiddle but displaying badly if i run it directly in fierfox?How can i solve the problem?
ps:
here is the html
<html><head>
<link rel='stylesheet' type='text/css' href='style.css'>
</head><body>
<div id='headercontainer'>
<h2>welcome to research club</h2>
<ul class='mainNavigation'>
<li><a class='currentPage' href='#'>Home</a></li>
<li><a href='#'>Meetups</a></li>
<li><a href='#'>Feedback</a></li>
<li><a href='#'>About</a></li>
</ul>
</div>
<div id='page'>
<p> this is a simple paragraph inside the page that is full of meaningless words but tries to populate a page . mama miya tolina galya mamba eno.</p>
</div><!--#page-->
</html>
Here is the css
div#headercontainer
{
position:relative;
}
div#page
{
margin:0px 50px 0px 50px;
padding:0 450px 0 30px;
position:relative;
background:#181C21;
clear:right;
color:white;
}
ul.mainNavigation
{
list-style:none;
margin:0px 50px 0px 0px;
position:absolute;
bottom:0; right:0;
padding:0;
}
ul.mainNavigation li
{
background:#192839;
color:white;
float:left;
height:1.6em;
padding:5px;
}
ul.mainNavigation li a
{
color:#bbbbbb;
display:block;
text-decoration:none;
height:1.6em;
font-size:0.9em;
}
ul.mainNavigation li a:hover
{
border-bottom:2px solid #0F67ff;
color:white;
}
ul.mainNavigation li a.currentPage
{
border-bottom:2px solid #176092;
}
I'm guessing that you haven't added a general selector to put all margins and paddings to 0, in this case you would need to add:
div#headercontainer {
position:relative;
padding:0px;
margin:0px;
}
or
*{
padding:0px;
margin:0px;
border:0px;
}
All browsers have some basic setups for non defined elements meaning I can set the I want all texts to be white instead of black and if you haven't set the color all the texts will be written in white.
Hoping this will help…
Use float and clear instead of position absolute.
Like this:
div#headercontainer{
float:left;
position:relative;
}
h2{
float:left;
}
ul.mainNavigation{
float:right;
}
#page{
clear:both;
float:left;
}
Hope this help... (This is my first answer on this website :S)