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
Related
I would like to ask for help with this task:
I would like to have a non-breaking-space between img and a piece of text. But the problem is, that sometimes the line between image and text breaks up even if the non-breaking-space appears.
Where am I wrong?
Here is the JsFiddle:
https://jsfiddle.net/cj7Lp1vy/9/
HTML
<div id="parent">
<div id="child">
<!-- some content -->
<div class="cl">
<img src="obrazky/plocha.png"> Plocha: 11 m<sup>2</sup>
<img src="obrazky/pocet_pokoju.png"> Pokoje: 2
<img src="obrazky/rekonstrukce.png"> Rekonstrukce: ne
<img src="obrazky/okna.png"> Okna: stará
<img src="obrazky/topeni.png"> Topení: dřevo
<img src="obrazky/typ_stavby.png"> Typ stavby: dřevo
</div>
</div>
</div>
CSS
#parent {
width:235px;
min-height:110px;
border:1px solid #CCCCCC;
padding:15px 10px 10px 10px;
margin:0px 12px 24px 12px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#child {
position:relative;
}
.cl {
clear:both;
}
img {
border:1px solid red;
width:16px;
}
You're going wrong because the Unicode specification for NBSP says that there shouldn't be a line break after the character. it doesn't stop there being one before the character.
To work around this, wrap the <img> and the in a span and give the span the styling white-space:nowrap;
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;}
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.
I have an image of a map, and I want to add the address to the right hand side of it, I can't seem how to figure it out. Can any one help, this is the part of the coding I'm using:
<div id="main">
<span style="margin-top:5px;
margin-left:5px;
text-align:right;">
<h1 align="center" style="font-size:40px;"><span style="color:red;">Contact</span><span style="color:#FFFFFF;"> Us</span></h1>
<img id="map" src="images/map.png" title="Image of Map for Krazie Needles." align="centre" />
<p align="left" style="margin-left:5px;
margin-top: 5px;">
45 Station Road
with the css code
#main
{
margin-top:42px;
margin-left:auto;
margin-right:auto;
position:relative;
background:rgba(16,16,17,0.70);
height:85%;
width:90%;
box-shadow: 3px 3px 2.5px #888888;
border-radius:5px;
}
img#map
{
margin-left:5px;
border-radius:5px;
border-style:solid;
border-width:2px;
border-color:#FFFFFF;
}
I want to align the < p > tag next to the image.
I have tried to maintain your styling but have removed all inline styles.
#main
{
margin: 42px auto;
position:relative;
background:rgba(16,16,17,0.70);
width:90%;
box-shadow: 3px 3px 2.5px #888888;
border-radius:5px;
}
h1 {
text-align: center;
color: #fff;
font-size: 2em;
}
.red {
color: red;
}
.map
{
display:inline;
margin: 0 5px 0;
border-radius:5px;
border-style:solid;
border-width:2px;
border-color:#fff;
}
.address {
display:inline;
vertical-align: top;
}
<div id="main">
<h1><span class=red>Contact</span> Us</h1>
<img class=map src="http://lorempixel.com/200/200" title="Image of Map for Krazie Needles." />
<p class=address>45 Station Road</p>
</div>
You can use float: left; on the image tag (see float at W3.org), or place the image inside the <p>.
In the img tag, change the (incorrect) align="centre" to align="left".
(Note, there is no center attribute on img tag.)
You should add float:left to image css. If you want to put the address on Map you have to add position:absolute to paragraph with address css.