In my last question I asked how could I add text onto the gray area of the picture, some guys suggested using <span>, I ended up with all the text (because it is a span after all, inline) on top of each other in a single line (left picture), even though it was set to display:block. How can I break it into seperate lines as seen in the picture on the right?
and does it make sense using h4/h5 for the styling or I should use different div's or something?
HTML:
<div class="rightCol1">
<img src="pic1.png"><span><h4>2014 02 16</h4><h5>po pirmojo etapo <br> naudingiausi - osvaldas <br> sarpalius ir lukas šukutis</h5></span>
<img src="pic2.png"><span><h4>2014 02 16</h4><h5>geriausias sezono <br> startas per visą klubo <br> istoriją </h5></span>
</div>
CSS:
.rightCol1{
float:right;
margin-right:150px;
margin-top:10px;
}
.rightCol1 a {
background:green;
display: block;
position:relative;
height:200px;
width:100px;
margin-bottom: 160px
}
.rightCol1 a span {
line-height:0px;
display:block;
margin-left:15px;
width:234px;
height:70px;
position:absolute;
bottom:-80;
left:0;
z-index:1;
}
h4{
padding:0;
margin:0;
font-style:;
color:#e6540c;
font-weight:bold;
font-size:14;
}
h5{
padding:0;
text-transform:uppercase;
color:rgb(193,193,193);
}
It's because your span has no line height, so each on the lines will come out ontop of each other. I suggest removing line-height from your span CSS:
.rightCol1 a span {
display:block;
margin-left:15px;
width:234px;
height:70px;
position:absolute;
bottom:-80px;
left:0;
z-index:1;
}
Related
My code is here (I'm a newbie just playing with some stuff I've learned; I realize this is hardly a work of art, my links all link back to Codecademy, etc - they're just placeholders) Here's the CSS:
head {background-color:#eed393;}
#links {display:inline-block;
margin-left:35px;
margin-top:8px;
margin-bottom:40px;
vertical-align:top;
}
div:hover {opacity:0.8;
}
#locationhours {
border:none;
border-radius:50px;
width:200px;
height:70px;
text-align:center; font-family:Georgia;
font-size:30px;
background-color:#724d20}
#menu {border:none;
border-radius:50px;
width:200px;
height:55px;
text-align:center; font-family:Georgia;
padding-top:15px;
font-size:30px;
background-color:#724d20}
#catering {border:none;
border-radius:50px;
width:200px;
height:55px;
text-align:center;
font-family:Georgia;
padding-top:15px;
font-size:30px;
background-color:#724d20}
a:link {text-decoration:none;
color:#b0dddf;}
a.fill_div {display: block;
height: 100%;
width: 100%
text-decoration: none;
}
And here's the HTML:
<head>
<div id:"links">
<div id="locationhours";>Location & Hours </div>
<div id="menu";>Menu</div>
<div id="catering";>Catering </div>
<div id="infocontact";>Info & <br> Contact </div>
</div>
I have a div id called #links that I am trying to use for aspects of my links I want to make universal. As you can see, although I am using inline-block, I can't get the links to be in a horizontal line; instead, they bunch up in a vertical line. If I put "div" rather than "#links" in my CSS, the inline-block works, but I'm going to have other div elements I want to use later that I don't want to apply the aspects for the links to. What am I doing wrong?
Here is a demo of your code now inline: http://jsfiddle.net/co738b5s/1/
I found lots of issues. In the "links" div you were using : instead of = to add the id. Also, when you are adding ID's and classes, you do not need the ; that you used. See my html for corrections.
<div id="links">
<div id="locationhours" class="inline">
Location & Hours </div>
<div id="menu" class="inline">
Menu
</div>
<div id="catering" class="inline">
Catering
</div>
<div id="infocontact" class="inline">
Info & <br/> Contact
</div>
</div>
//Had to make a new class for all the menu divs
head {background-color:#eed393;}
.inline {
float:left;
}
#links {
margin-left:35px;
margin-top:8px;
margin-bottom:40px;
vertical-align:top;
}
div:hover {opacity:0.8;
}
#locationhours {
border:none;
border-radius:50px;
width:200px;
height:70px;
text-align:center; font-family:Georgia;
font-size:30px;
background-color:#724d20}
#menu {border:none;
border-radius:50px;
width:200px;
height:55px;
text-align:center; font-family:Georgia;
padding-top:15px;
font-size:30px;
background-color:#724d20}
#catering {border:none;
border-radius:50px;
width:200px;
height:55px;
text-align:center;
font-family:Georgia;
padding-top:15px;
font-size:30px;
background-color:#724d20}
#infocontact {border:none;
border-radius:50px;
width:200px;
height:55px;
text-align:center;
font-family:Georgia;
padding-top:15px;
font-size:30px;
background-color:#724d20}
a:link {text-decoration:none;
color:#b0dddf;}
a.fill_div {;
height: 100%;
width: 100%
text-decoration: none;
}
The CSS display: inline must be applied to each individual member of the list you want to make inline. The display property is best described as the relationship of a node in its parent, not the relationship of all children. Furthermore, display is a non-inheritable property (see W3Schools), so applying it to the parent node #links won't affect its children (#locationhours, #menu, etc.) whatsoever.
When you changed it to affect div, you unknowingly were affecting all of the children, since they too are divs. To quickly fix this problem without any inline CSS, set each list member's div to the class .listmem, like this...
<div id="locationhours" class="listmem">
...so adding this to your CSS should quickly fix the problem:
.listmem {
display: inline;
}
I am trying to put a title in a div toolbar next to some pictures. The problem is that my text is not well placed, it should be at least on top of the toolbar but instead it is at bottom and doesn't move.
I would like it to be in the vertical middle at left near the pictures.
Here is a codepen : http://codepen.io/anon/pen/fDojK
And a picture :
Here is the html part of the title bar:
<div id="bar" >
<div id="picturesmenu">
<img src='images/back.jpg' alt='back' />
<img src='images/home.jpg' alt='home' />
<img src='images/reload.jpg' alt='reload' />
</div>
<div id="titlemenu">Main</div>
</div>
<div id="body">
...
And style :
#bar
{
width:100%;
height:50px;
padding-top:3px;
padding-left:10px;
border-bottom:2px solid white;
vertical-align:top;
}
#picturesmenu
{
margin:0;
padding:0;
display:inline;
}
#bar img
{
border:3px solid white;
width:40px;
margin:2px;
}
#titlemenu
{
margin:0;
padding-left:20px;
height:100%;
display:inline;
font-size:20pt;
font-weight:bold;
color:white;
}
#bar span
{
margin-left:20px;
margin-top:200px;
font-size:20pt;
font-weight:bold;
color:white;
}
I tried vertical align and margin but the "Main" text doesn't move...
Thanks in advance before I change anything into tables ;)
[EDIT]
Thank you all for your answers ! I didn't thought about handling the alignment of the content (#titlemenu) instead of the container (#bar), it's not very logical...
You need to work the vertical align for both #picturesmenu and #titlemenu and remove the padding left for that title if you want it to the left. Then work with inline-block elements. Like this:
EDITED WITH CROSS-BROWSER CODE
html, body {
height:100%;
width:auto;
padding:0;
margin:0;
background-color:black;
}
#bar {
width:100%;
height:auto;
padding-top:3px;
padding-left:10px;
border-bottom:2px solid white;
display:block;
}
#picturesmenu {
margin:0;
padding:0;
}
#bar img {
border:3px solid white;
width:40px;
margin:2px;
display:inline-block;
vertical-align:middle;
width:40px;
height:50px;
}
#titlemenu {
margin:0;
padding-left:0px;
display:inline-block;
vertical-align:middle;
font-size:20pt;
font-weight:bold;
color:white;
}
.item {
float:left;
width:120px;
height:120px;
border:2px solid white;
text-align:center;
margin:20px;
padding:20px;
}
.picitem {
height:70%;
margin-bottom:25px;
border:2px solid white;
}
.textitem {
underline:none;
color:black;
font-size:16pt;
color:white;
}
I have forked your CodePen
However, a way better approach would be to give #bar a display:block property and then add inline-block to everything inside, but if you want it to work as in your description, there you go
Add these lines to the #titlemenu in CSS
padding:10px;
display:inline-block;
vertical-align:top;
By vertical-align:top, the block gets aligned to the top of the parentdiv and you set padding to fit the height of the block to the height of the parent div
Demo
I am trying to create a footer bar which has a text element aligned on the left and one thats aligned to the right, however I'm having some difficulty.
This is what I have so far:
HTML
<div id="footer_bar">
<div id="footer_bar_content">
<p>
Left Text
</p>
<p class="align_right">
Right Text
</p>
</div>
</div>
CSS
#footer_bar
{
width:100%;
position:absolute;
margin:0;
bottom:0;
height:30px;
border-top:2px #eeeeee solid;
background-color:#f7f7f7;
}
#footer_bar_content { padding-left:15%; padding-right:15%; }
#footer_bar_content p { line-height:30px; margin:0; color:#222; font-size:11px; display:inline; }
.align_right { text-align:right; width:100%; }
Please could someone help me work out what is wrong? The align_right class doesn't appear to have any effect.
Is this what you are looking for. Take a look at fiddle. http://jsfiddle.net/GD8tL/1/
Use float instead of align
#footer_bar
{
width:100%;
position:absolute;
margin:0;
bottom:0;
height:30px;
border-top:2px #eeeeee solid;
background-color:#f7f7f7;
}
#footer_bar_content { padding-left:15%; padding-right:15%; }
#footer_bar_content p { line-height:30px; margin:0; color:#222; font-size:11px; display:inline; }
.align_right{ float:right;}
#footer_bar_content p.align_right {float:right; width:100%;}
Try this if you want your text on the right side, and play a bit with the width, because you want to give 100% of the main div's width, which is the whole place, so probably it will be displayed in new line.
<div id="footer_bar">
<div id="footer_bar_content">
<p>
Left Text
<span style="float: right;">
Right Text
</span>
</p>
</div>
</div>
You must remove width = 100% in class align_right and use "float: right" instead of "text-align:right"
CSS:
.align_right { float:right;}
Code: JSFIDDLE
instead of paragraph you should take left.. similar for right and use .left{float:left} and .right{float:right} then .footer_bar_content:after{clear:both} will work for u
You can try float right or left accordingly,
Html
<div id="footer_bar">
<div id="footer_bar_content">
<p class="left">
Left Text
</p>
<p class="right">
Right Text
</p>
</div>
</div>
StyleSheet
#footer_bar
{
width:100%;
position:absolute;
margin:0;
bottom:0;
height:30px;
border-top:2px #eeeeee solid;
background-color:#f7f7f7;
}
#footer_bar_content { padding: 0 15%; }
#footer_bar_content p { line-height:30px; margin:0; color:#222; font-size:11px; display:inline; }
.right { float:right; }
.left { float:left; }
Here is the Demo
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 create a little growl like div for a site. It works great in Firefox, but not IE6 (haven't tried IE7, but I still need to support IE6).
In Firefox: Centered text with image floated to right side of div
In IE6: Centered text with image to the left of text.
I've tried switching the img and span tag order, but that causes a line break in FF between the two, and IE renders the image on the right of the text, but not docked to the right side of the div.
HTML
<div id="growl">
<img src="close.gif" class="action" title="hide" />
<span class="text">Grrrrrr.......</span>
</div>
In css:
#growl {
background-color:yellow;
text-align:center;
position:absolute;
top:0; left:0;
width:98%;
padding:10px 0;
margin-left:1%;
z-index:10;
border:1px solid #CCCCCC;
}
#growl > .text {
font-size:120%;
font-weight:bold;
}
#growl > .action {
float:right;
cursor:pointer;
}
The > selector does not work on IE 6.
Just get rid of it:
#growl .text {
font-size:120%;
font-weight:bold;
}
#growl .action {
float:right;
cursor:pointer;
}
The > css selectors are not supported by IE6, try just removing them.
No point in adding a class to each elements in the div when you only have one img and span. Do this instead for cleaner code.
<div id="growl">
<img src="close.gif" title="hide" />
<span>Grrrrrr.......</span>
</div>
-
#growl {
background-color:yellow;
text-align:center;
position:absolute;
top:0; left:0;
width:98%;
padding:10px 0;
margin-left:1%;
z-index:10;
border:1px solid #CCCCCC;
}
#growl span {
font-size:120%;
font-weight:bold;
}
#growl img {
float:right;
cursor:pointer;
}