I am trying to align an image with an , and I cannot get the heading to wrap around the image icon. I have a screen cap here: http://instagram.com/p/YNGBzrtAs8/
My CSS code is a mess because I keep trying everything, and it's getting messy. Here is the current mess state:
#deck-sub .news-feed { float: left; width: 90%; padding: 5%; margin: 0 0 15px 0; }
#deck-sub h1 { background: none; font: bold 2.0em Arial, Helvetica, sans-serif; color: #006586; margin: 0 0 -8px 0; }
#deck-sub .news-feed h2 a { color: #006586; text-decoration: none; font-size: 1.2em !important; margin: -33px 0 0 0;}
#deck-sub .news-feed ul {vertical-align: middle !important; background: none; padding: 5px 0 0 0; list-style: none; }
#deck-sub .news-feed ul li { vertical-align: middle !important; width: 100%; padding: 5px 0 5px 0; margin: 5px 0 0 0;}
#deck-sub .news-feed ul li a { vertical-align: middle !important; width: 100%; font: 0.8em/1.1em Arial, Helvetica, sans-serif; color: #555 !important; text-decoration: none; padding: 0px 0 0 0; margin: -5px 0 0 0; }
#deck-sub .news-feed ul li a:hover { background: none; color: #009fc7 !important; }
#deck-sub .new-feed ul li img { vertical-align: middle !important; }
#deck-sub .sfnewsListItem { vertical-align: middle !important; background: #ccc; }
#deck-sub .sfnewsMetaInfo { vertical-align: middle !important; padding: 0px; margin: 0px; background: #444;}
Any help would be greatly appreciated. I have run into this before, but my tricks are not working in this case. Thank you in advance.
I'm not sure what you mean by get the heading to wrap around...but I assume you want the image and the title to be beside eachother? vertical-align I don't believe works awesomely for this.
The best option is to remove the icon as an and instead put it into the CSS as a background image. Doing that gives you the ability to position it to the pixel.
It'd also let you sprite those two news\event icons into a single file to serve less resources.
http://www.w3schools.com/css/css_image_sprites.asp
Cheers!
Steve
Related
I want to move the text in this unordered list further to the right of my graphic, so they don't overlap. How do I do this?
Here's my code:
.page p { line-height: 1.2em; }
.page a { color: #1badd2; text-decoration: none; }
.widget li {
margin: 0;
padding: 2px 0px 8px 35px;
display: block; position: relative;
border-bottom: none;
}
.widget li:before {
content: '';
display: block;
background: url(http://bryancollins.eu/wp/wp-content/uploads/2014/04/arrow.png) no-repeat 0 0;
height: 12px; width: 30px;
position: absolute; top: 6px; left: 0px;
}
You can see it in action here: bryan.collins.eu/wp
You need to make room at the left by adding padding to the li element. The absolute positioning declared on the li:before selector causes it to be stacked above the li element.
Add this rule to this selector:
.featured-box ul li {
padding: 0 0 0 40px;
}
To vertically center the arrow a little more: Change the top value to 10px.
.widget li:before {
top: 10px;
}
Note: You could easily have added this as a background image on the li without using the :before selector.
.featured-box .widget li {
list-style: none;
background: url("http://bryancollins.eu/wp/wp-content/uploads/2014/04/arrow.png") no-repeat scroll 0 10px rgba(0, 0, 0, 0);
display: block;
margin: 0 0 0 30px;
padding: 0 0 0 40px;
}
I want the position of ol list item in the middle of content.
My code:
#block-views-credit-library-block-1 .item-lists ol {
list-style-position: inside;
margin: 0 15px 25px;
list-style-type: decimal;
}
#block-views-credit-library-block-1 .item-lists ol li {
background: url("../images/number.png") no-repeat scroll 0 0 transparent;
color: #F9F9F9;
font-family: arial;
font-size: 11pt;
font-weight: bold;
padding: 5px 0 0 13px;
}
See the issue image: http://manjitsingh.org/sites/default/files/test.png
Any help would be appreciated.
Use this css on your ol li block:
background-position: 0 50%;
Or you could try using:
top: 50%;
margin-top: -div height / 2;
position: absolute;
I'm having problem with this style, the content body wraps around the menu bar, I've tried removing the float but nothing happens.
.menu {
float: left;
padding: 0;
width: 100%;
margin: 0 0 1em 0;
}
.menu ul {
width: 1100px;
margin: 0 auto;
padding: 0;
list-style: none;
}
.menu li {
float: left;
}
.menu li a {
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
color: #FFFFFF;
padding: 2px 10px;
text-decoration: none;
}
.menu a:hover {
color: #FFFFFF;
border-radius: 5px;
border-style: solid;
border-color: #666666;
border-left: 1px;
border-right: 1px;
box-shadow: #333 3px 3px 4px;
}
.content {
width: 1100px;
margin: 0 auto;
}
the content writes next the last link.
You don't have any clear in your CSS. Make sure that the first element after the floating div gets cleared.
I have the following CSS to style a button and an anchor tag as they have the same button style but they are in different locations. SO I thought to give them the same CSS so that they would both render exactly the same. However, the button.enter has the text pushed down. The first one works fine. It would work with padding:0 but that would affect the first one.
Any ideas?
a.enter, button.enter {
text-decoration: none;
background: url('../img/enter-button_small.png') no-repeat 0px 0px;
height: 35px;
padding: 8px 0;
text-align: center;
color: white;
margin: 0 auto;
text-shadow: none;
font-size: 16px;
width: 300px;
vertical-align: middle;
}
Just add another style that will reset the padding on the button alone. Some of your css is unrequired as well. vertical-align:middle; does nothing in this case for example.
a.enter, button.enter {
text-decoration: none;
background: url('../img/enter-button_small.png') no-repeat 0px 0px;
height: 35px;
padding: 8px 0;
text-align: center;
color: white;
margin: 0 auto;
text-shadow: none;
font-size: 16px;
width: 300px;
}
button.enter {
padding:0;
}
You need to mention margin and padding as 0 coz button has the default margin and padding.
Add this below code
a.enter, button.enter {
text-decoration: none;
background: green url('../img/enter-button_small.png') no-repeat 0px 0px;
line-height: 35px;
padding: 8px 0;
text-align: center;
color: white;
margin: 0 auto;
text-shadow: none;
font-size: 16px;
width: 300px;
vertical-align: middle; display:inline-block; padding:0; margin:0; border:none
}
Here is working demo http://jsfiddle.net/6Ygc2/
On hover the background color seems to come outside of the "boxes" that are my navigation items. I have tried tweaking everything. Here is my CSS and HTML...
<div id="menuTop">
<ul id="menuOne" class="menuHoriz">
<li>home</li>
<li>about us</li>
<li>services</li>
<li>samples</li>
<li>contact</li>
</ul>
</div>
#menuTop {
clear: both;
padding-top: 18px;
height: 55px;
font-size: 12pt;
background-color: #000;
}
#menuTop ul, #menuTop li {
margin: 0;
padding: 4px 0 0 0;
}
#menuTop ul {
list-style-type: none;
}
#menuTop li {
display: block;
background-color: #3C87D1;
text-align: center;
width: 197px;
height: 30px;
margin: 0 0px 0 0;
padding: 4px 0 0 0;
border: 1px solid #2A5E92;
}
#menuTop a {
display: block;
margin: 0;
padding: 4px 0 0 0;
}
#menuTop a:link, #menuTop a:visited {
width: 197px;
height: 30px;
padding: 4px 0 0 0;
margin: 0;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
color: #fff;
text-decoration: none;
}
#menuTop a:hover {
width: 197px;
height: 30px;
padding: 4px 0 0 0;
margin: 0;
color: #fff;
background-color: #5F9FFF;
}
ul.menuHoriz li {
float: left;
}
I removed the unneeded/double definitions from your stylesheet and fixed the bug.
* {
margin: 0;
padding: 0
}
#menuTop {
font: 12pt 'Trebuchet MS', Helvetica, sans-serif;
padding-top: 18px;
height: 55px;
background: #000
}
#menuTop ul {
padding-top: 4px;
list-style: none
}
#menuTop li {
background: #3C87D1;
border: 1px solid #2A5E92;
text-align: center
}
#menuTop a {
display: block;
width: 197px;
line-height: 30px
}
#menuTop a:link, #menuTop a:visited {
color: #fff;
text-decoration: none
}
#menuTop a:hover {
background-color: #5F9FFF
}
ul.menuHoriz li {
float: left
}
Here are some notes:
It is handy to set the margin and padding for all elements to zero by using *, before designing your layout.
Set the width and height for your menu item to the a element only (the most nested element). The surrounding li element will take the same size. Also use line-height instead of height because it automatically makes your text vertically centered.
Don't redefine styles in :link, :visited, :hover or :active (for example dimensions and font). It gives unnecessary calculations for the browser.
If your problem is only the color coming outside the boxes, add this to your #menuTop li
overflow:hidden;
Works for me. :)
Try this one: jsfiddle example
#menuTop {
clear: both;
padding-top: 18px;
height: 55px;
font-size: 12pt;
background-color: #000;
text-align: center;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
line-height: 34px;
}
#menuTop a {
float: left;
border: 1px solid #2A5E92;
background-color: #3C87D1;
width: 197px;
color: #fff;
text-decoration: none;
}
#menuTop a:hover {
background-color: #5F9FFF;
}