How do I add the icon to the footer? Here is the following code I have completed.
CSS:
#footer {
padding: 0 10px;
background:#EEE;
bottom:0px;
right:0px;
left:0px;
position:fixed;
box-shadow: 0px 0px 8px 0px #000000;
}
#footer p {
margin: 0;
padding: 10px 0;
}
and HTML:
<div id="footer">
<p><center>2013 - Index</center>
<img style="text-align:right" src="./images/ranbir.jpg" height="25" width="25"></p>
</div>
Thank you for any help!
I am trying to put the 2013 - Index in the center and the icons goes right. But it doesn't seem right at all.
Try either:
<img style="float:right" src="./images/ranbir.jpg" height="25" width="25"></p>
or
<img style="position:absolute; right:0;" src="./images/ranbir.jpg" height="25" width="25"></p>
Let me know if that helps you and have a look at http://jsfiddle.net/s89s7 if you want to see it working.
Edit: To clarify, text-align only works on things inside that element. E.g.
<body>
<p style="text-align:center">Text</p>
</body>
Will align "Text" inside of "p" but will not align "p" inside of "body". Hope that makes sense.
Related
I have 2 questions (more like 1.5)
1) What would be the correct way to modify the menu in the first picture to look like the one in the second. Since I put both the picture and the text in the same <a> tag I'm having problems with the white border (the icons are 30x30px, no transparent space around them or anything) :
HTML:
<div id="header">
<div class= "main">
<div class="logoHeader">
<img src="logo.png">
</div>
<div class="menuPicHeader">
<img src="stovyklae.png"><h2>stovykla</h2>
<img src="klubase.png"><h2>klubas</h2>
<img src="elparde.png"><h2>el. parduotuvė</h2>
<img src="kontaktaie.png"><h2>kontaktai</h2>
</div>
<div class="socialIconsWrapHeader">
<img src="yttop.png">
<img src="ftop.png">
</div>
</div>
</div>
CSS:
h2{
display:inline-block;
text-transform: uppercase;
text-decoration: none;
color: black;
margin-left:10px;
margin-right:10px;
font-size:14px;
}
.logoHeader{
margin-left:15px;
float:left;
margin-bottom: 20px;
margin-top:15px;
}
.socialIconsWrapHeader{
float:right;
margin-top:15px;
margin-right:20px;
}
.socialIconsWrapHeader a{
margin:0px 10px 0px 10px;
}
.menuPicHeader{
float:left;
margin:20px 0px 0px 130px;
padding-left:10px;
}
.menuPicHeader a{
padding-top:20px;
padding-bottom:2px;
}
2) I was wondering what should I use to get the text onto the picture as seen here:
Should I cut the picture in a half, get some div and stick it to the bottom of the picture using the grey half as background? Or somehow just write on top of the <a>?
HTML:
<div class="rightCol1">
<img src="pic1.png">
<img src="pic2.png">
</div>
CSS:
.rightCol1{
float:right;
margin-right:30px;
margin-top:10px;
}
1: add .menuPicHeader a{ margin-right: 20px; }
http://jsfiddle.net/Lphup/
2: There are a lot of ways to do that, but here's one option:
http://jsfiddle.net/33vth/
for second
<div class="rightCol1">
<img src="pic1.png"><span>your text</span>
<img src="pic2.png"><span>your text</span>
</div>
CSS:
.rightCol1{
float:right;
margin-right:30px;
margin-top:10px;
}
.rightCol1 a {display:inline-block;position:relative;height:200px;width:100px;}
.rightCol1 a span {display:block;width:100px;height:70px;position:absolute;bottom:0;left:0;z-index:99;background:#333}
You can have more positioning control over the elements if you set their parent's positioning to 'relative' and then set their positioning to absolute. This lets you use top, left or right to set an absolute position for the child objects, in relation to their parent.
I didn't have a chance to try this, but something like this should do the trick:
.menuPicHeader { position: relative; }
.menuPicHeader a { position: absolute; top: 0; }
Working on a website where I am thinking to make the name as a variable to show who is logged in but the problem is that the log out buttom goes out of the header when the name is short as Petter, but stays inside when the name is long as Petter Hansen. Is it a solution to make the buttom stay at same position independent of the name size?
jsfiddle: http://jsfiddle.net/85tU2/
Try this: http://jsfiddle.net/85tU2/2/
I've tidied up a few things - basically, moved the divs around because you are using float:right. Your code was using margins to move the button to the right of the name. So in the css, I've done this:
#formtekst {
position:relative;
float: right;
margin: 1px 0px 0px 0px;
background:#ccc;
}
#form-group {
position:relative;
float:right;
margin:15px 0px 0px 0px;
background:#ddd;
}
And for the html:
<div id="logo">
<img id="logo" src="NIH.gif" alt="logo" />
</div>
<div id="form-group">
<button type="button" class="btn">Logg ut</button>
</div>
<div id="formtekst">
<p>Logged in as Petter</p>
</div>
Hey ,
you can just easily change the styles for the #formtkst to this
#formtekst {
float: right;
margin: 1px 15% 0px 0px;}
I just wanted to create a newsbox just by using CSS without so many IMG or TABLE crap. It works quite well but there will always appear a space between my image and the colored bar under the picture which should be directly under the picture not with some space between. Here is my code :
<div id="mainbody">
<div class="news_box">
<div class="news_box_inside">
<img src="img/newsbox1.jpg" width="270" height="140" border="0" />
<div class="news_box_bar"></div>
</div>
</div>
</div>
#mainbody {
margin: 0 auto;
width: 900px;
padding-top:30px;
padding-bottom:30px;
}
.news_box {
float:left;
width:288px;
height:348px;
background-color:#DDDDDD;
margin-right:5px;
margin-left:5px;
border:1px;
border-style:solid;
border-color:#BBBBBB;
}
.news_box_inside {
float:left;
margin:9px;
width:270px;
height:330px;
background-color:#FCFCFC;
}
.news_box_bar {
background-color:#540000;
height:43px;
border:1px solid #892d2d;
}
I tried to set the margin and padding to zero for the image or trying position: or top: but somehow I can't get rid of the space. Anyone got a good solution ?
Best regards,
Kris
Add this to your CSS:
.news_box_inside > img {
display: block;
}
Example: http://jsfiddle.net/grc4/TV4zT/
Kris,
If you inspect <img> element by default it's css property display is set to inline-block, SO I suggest to apply style on <img> element and make it display:block
<img src="img/newsbox1.jpg" width="270" height="140" border="0" style="display:block" />
DEMO
Just add a margin to your newsbar as showm: DEMO
.news_box_bar {
background-color:#540000;
height:43px;
border:1px solid #892d2d;
margin-top:-5px;
}
.news_box_bar {
background-color:#540000;
margin-top:-5px;
height:43px;
border:1px solid #892d2d;
}
set this in your CSS class
use link below to see working solution for your problem
http://jsfiddle.net/v7NwR/
<div id="mainbody">
<div class="news_box">
<div class="news_box_inside">
<figure><img src="http://static.adzerk.net/Advertisers/a04d6b3e25c747f48ef794d13e765425.jpg" border="0" /></figure>
<div class="news_box_bar">sdfgsdfgsdfg</div>
</div>
</div>
</div>
css
.news_box{ float:left; border:5px #444 solid;}
figure{ font-size:0%;}
#mainbody{ color:#000;}
.news_box_bar{ background:red;}
I am constructing a vertical navigation bar unable to format the text next to the image as I'd like. I can manipulate the image using the margin. I've got it where I want it. Now, I try to manipulate the text margin and it has no effect. It appears like so....
HTML:
<div class="content_nav">
<div class="content_nav_item"><img src="images/icon.jpg" height="60px" width="60px" alt="One"><span class="content_nav_item_text">One</span></div>
<div class="content_nav_hr"> </div>
<div class="content_nav_item"><img src="images/icon.jpg" height="60px" width="60px" alt="One"><span class="content_nav_item_text">One</span></div>
<div class="content_nav_hr"> </div>
<div class="content_nav_item"><img src="images/icon.jpg" height="60px" width="60px" alt="One"><span class="content_nav_item_text">One</span></div>
<div class="content_nav_hr"> </div>
<div class="content_nav_item"><img src="images/icon.jpg" height="60px" width="60px" alt="One"><span class="content_nav_item_text">One</span></div>
</div>
CSS:
.content_nav{
margin:45px 0px 45px 48px;
padding:0px;
width:232px;
height:467px;
background-color:#82c738;
box-shadow:inset 0px 0px 10px #578e30;
float:left;
}
.content_nav_item {
margin:0px 10px 0px 10px;
padding:0px;
height:115px;
}
.content_nav_hr {
margin:0px 10px 0px 10px;
padding:0px;
height:1px;
width:202px;
background-color:#A0DF5C;
}
.content_nav_item_text {
margin:10px 0px 10px 0px;
padding:0px;
}
.content_nav_item img {
margin:28px 10px 0px 20px;
padding:0px;
display:inline;
}
Any thoughts as to why I can't position that span?
Text is kindof a weird bird in CSS, it's not handled how you'd think or want it to be. Here's a good article explaining the idiosyncrasies of vertical text alignment
The text is between span tags. This tags is between the a tag and the div tag.
You need to separate them. They are stacking the text and they prevent the text to move.
You need to "end" the img tag
I'm in the early stages of building a mobile version of our website, and I'm already having an issue with a div tag & background not centering. The stylesheet code is as follows:
<!DOCTYPE html>
<html><head>
<style type="text/css">
BODY{margin-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px; background-color:#fff;FONT-SIZE:12px;COLOR:#000000;FONT-FAMILY:Arial, Helvetica, sans-serif;}
header {
display:block;text-align:center;width:100%;height:6.5em;
}
.topHeader {display:block; width:100%; height:5.4em;}
#acdlogo {
float:left;text-align:left; overflow:hidden; display:inline;
}
#acdHeadLinks {
float:right;text-align:right;margin-top:5px;
}
.clearAll { clear:both; font-size:0; padding:0; margin:0; }
.search-bg {
text-align:center;width:85%;background-color:#265e99;
height:45px;z-index:1000; border-radius:5px; -webkit-border-radius:5px;
}
</style>
</head>
Here is the code that appears after the stylesheet code:
<body>
<div>
<header>
<div class="topHeader" align="center">
<div id="acdlogo">
<img src="images/logo.gif" border="0" alt="Alt Text">
</div>
<div id="acdHeadLinks">
<img src="images/mcontact.png" border="0"><br>
Directions My Account My Cart
</div>
</div>
<div align="center" class="search-bg" id="searchgcs">
hello world
</div>
</header>
</div>
</body></html>
The problem is that the blue background is supposed to hold the search engine form, but it's aligning left not center, and I don't know what I need to do to center it. I'm trying real hard not to have to use tables. Anybody can help me figure this out? Thanks!
UPDATE: Alright I have a new error. I'm trying to center an image using div tags and I'm not getting anywhere, even with the answer below. I've even stripped down the code to only attempt to center the image and no go. The image is always aligned left inside the div tag and I want it centered. Here is my code:
<!DOCTYPE html>
<html><head><title></title>
<style type="text/css">
#mainImage {
width:300px;
margin:0 auto;
padding:0;
}
img.curMainImage {
max-height:240px;
max-width:240px;
}
</style>
</head>
<body>
<div id="mainImage"><img class="curMainImage" src="Image Here" border="0" /></div>
</body>
</html>
Anybody can help?
add margin: 0 auto; to your .search-bg - http://jsfiddle.net/7djxY/1/
.search-bg {
text-align:center;
width:85%;
margin: 0 auto;
background-color:#265e99;
height:45px;
z-index:1000;
border-radius:5px;
-webkit-border-radius:5px;
}
Update: the margin: 0 auto; is used to set the top and bottom margins to 0, and the left-right margins to auto. In that case the browser will automatically detect the available side margin space and distribute it equally to the left and right. And with the same margins both sides the element becomes centered.