I am trying to code this block of text with image in it but for some reason it's not working for me as. What would be the best approach to get this right with CSS?
Thank you all!
UPDATE
This is what I got the problem is with that the underline heading
http://jsfiddle.net/C2kqR/
.block h3{
margin-bottom: 0.6em;
margin-top: 0;
color: #c80006;
font-weight: 400;
font-style: normal;
font-size: 22px;
line-height: 1.2em;
font-family: 'Signika', sans-serif;
text-rendering: optimizeLegibility;
}
.heading {
margin-bottom: 20px;
color: #c80006
}
.aleft {
float:left;
margin:0 2em 0 0 !important;
}
.hr-line-full {
width: 100%;
margin: 22px 0 35px;
display: block;
border-top: 1px solid #dedede
}
Have a look at this fiddle
CSS:
img{
float:left;
margin:0 10px 10px 0;
}
As long as the text and image are within a parent container, simply float the image left to have the text wrap around it. To Space it apart from the text, give it a margin and voila!
I have a solution for you where you can remove the hr element you are trying to imitate and instead use border for the h3.
Changed CSS for .heading:
.heading {
margin-bottom: 34px;
padding-bottom: 24px;
color: #c80006;
border-bottom: 1px solid #dedede;
overflow: hidden;
}
Fiddle here
Related
Been messing with it for the past couple of hours. Trying to get a vertical space betweeb tags, but no luck...
Blog has a separate template file.
Live link here
http://soloveich.com/pr6/blog/
Html code
<div id="tagy">
widget code
</div>
css
#tagy {
margin-top: 20px !important;
}
#one h2 {
text-align: center;
width: 100%;
padding-top: 45px;
padding-bottom: 10px;
font-family: 'Raleway', sans-serif;
font-size: 26px !important;
color: #7e7e7e;
border-bottom-style: dotted;
border-bottom-color: #a6a6a6;
border-bottom-width: 1px;
}
.seo-tag-cloud a {
margin: 10px;
padding: 7px;
background-color: #dddddd;
color: #666666;
font-size: 14px !important;
text-align: center;
}
Add display: inline-block to your .seo-tag-cloud a styling. Anchors are inline by default, which means they don't have margin.
I was toying with some made code on codepen, trying to get used to html/css since I am not really comfortable on the positioning. This must be pretty silly but I can't make it work.
HTML:
<div id="hh">
<h1>Wacom Hover Effect</h1>
</div>
<div id="cl">
Read More
Learn More
Read Article
Download
</div>
CSS:
*, :before, :after{ #include box-sizing('border-box'); }
body{ padding: 1em; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; background: #eee; }
#hh{
position:absolute;
left:50%
}
h1{
position:relative;
left:-50%;
font: 300 3em/1em 'Open Sans', sans-serif;
border: solid 0.00019em #000;
margin-bottom: 0.2em;
padding: 0.4em 0.2em 0.4em 0.2em;
background-color:lightblue;
border-radius:0.2em;
}
#cl{
clear:both;
}
.button,
[class*="button-"]{
position: relative;
display: inline-block;
overflow: hidden;
float:left;
margin: 0 1em 1em 0;
padding: 0 4em;
height: 3.5em;
font: 300 1em/3.5em 'Open Sans', sans-serif;
text:{
decoration: none;
shadow: 0 1px 3px rgba(black, .35);
}
letter-spacing: .08em;
color: #fff;
background: #0090C0;
border: solid 1px #fff;
border-radius: 2px;
#include transition(.35s ease all);
}
}
There is some irrelevant code after that about hovering etc.
The result is this: http://codepen.io/roygbiv/full/FjLcA
So I wanted h1 at center and I found here the method of putting #hh absolute, left:50% and then h1 relative left:-50%. And it screwed up the positioning.
What I want is h1 on center top, then the 4 "a"s under it (not center, just not overlapping).
Putting position: absolute on an element makes all other elements ignore it. This can be solved by putting display: inline-block on the h1 and text-align: center on #hh:
Check new pen: http://codepen.io/anon/pen/kovaC
#hh {
text-align: center;
}
h1{
font: 300 3em/1em 'Open Sans', sans-serif;
border: solid 0.00019em #000;
margin-bottom: 0.2em;
padding: 0.4em 0.2em 0.4em 0.2em;
background-color:lightblue;
border-radius:0.2em;
display: inline-block;
}
inline-block makes the element's box adapt to the width of its text. I presume the desired look of the header is for the blue box to not be 100% width, which is otherwise the case with h1 and other block elements.
i have done the following modification in css and it is working as expected:
#hh{
text-align: center;
margin-left:auto;
margin-right:auto;
width:40%;
}
h1{
font: 300 3em/1em 'Open Sans', sans-serif;
border: solid 0.00019em #000;
margin-bottom: 0.2em;
padding: 0.4em 0.2em 0.4em 0.2em;
background-color:lightblue;
border-radius:0.2em;
}
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 this page (responsive site in progress) the background image of the containing div (article) is as wide as the longest sentence (p). So they don't are as wide as the column (#main = 30em). What can I do with CSS to make all div's as wide as the column and still have their responsiveness intact?
#agenda #main article {
margin-bottom: 1em;
background: #fff url() repeat;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
border: 0;
}
#agenda #main article h3 {
color: #666;
letter-spacing: 0.2em;
text-transform: lowercase;
line-height: 100%;
margin-bottom: .4em;
padding-top: .4em;
}
#agenda #main article h4 {
color: #666;
letter-spacing: 0.2em;
text-transform: lowercase;
line-height: 100%;
margin-bottom: .4em;
padding-top: .4em;
}
#agenda #main article p {
color: #666;
}
You need to remove the float: left from the #main article in your css (line 402) or override it with float: none.
Can't really test the responsiveness on mobile devices at the moment, but it seems that you simply need to add a width:100% to your article elements:
#agenda #main article {
background: url("") repeat scroll 0 0 #FFFFFF;
border: 0 none;
border-radius: 6px 6px 6px 6px;
margin-bottom: 1em;
width: 100%;
}
Tried it in firebug and it looks fine even when I'm zooming in or out.
I am new to CSS, I found an layout online, but I have a little problem customizing it.
When the content of mainContent div is "higher" then the left menu, everything is working ok - but when the mainContent is smaller, it looks like this:
The div order is visible through Firefox WebDevelopper addon. The .css file is as follows:
body {
padding: 0px;
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
}
#container {
padding-right: 20px;
padding-left: 20px;
}
#header {
}
#mainMenu {
border: 1px solid #808080;
font-size: 0.8em;
}
#pageBody {
position: relative;
}
#sidebar {
width: 250px;
padding: 5px 10px 10px 10px;
float: left;
border: 1px solid #808080;
font-size: 0.8em;
margin-top: 5px;
margin-right: 10px;
min-height: 500px;
}
.mainContent {
text-align: justify;
min-width: 400px;
min-height: 500px;
margin-left: 285px;
}
#footer {
font-size: 0.8em;
border-top-style: solid;
border-top-width: 1px;
border-top-color: #CCCCCC;
text-align: center;
color: #CCCCCC;
background-color: #333333;
padding-top: 10px;
padding-bottom: 10px;
margin: 0;
/*clear: both;*/
}
#footer p {
margin-top: 0px;
margin-bottom: 5px;
}
#footer a {
color: #CC3300;
text-decoration: none;
}
#footer a:hover {
color: #FF9900;
}
Can I please ask for some guidance in repairing this layout? I would like to acheive something similar to:
The exact position is not important, I just want the footer to be placed below the pageBody div.
I would be grateful for any help.
I don't know what your html looks like, but it looks like you could try inserting a clearing div just before the footer... btw, why is the 'clear: both;' commented out in the footer css rule?
code to insert just before the footer div:
<div style="clear: both;"/>
Not positive whether it will help, but if I understand your problem correcty, this is my best guess!
Try changing pageBody to:
#pageBody {
float: left;
clear: both;
}