I've got the following:
HTML:
<div class="boxy"><img><p>Paragraph testing.</p></div>
CSS:
.boxy{
width= 150px;
background: #E5E5E5;
filter:alpha(opacity=90);
opacity:0.9;
color: #e9e9e9;
font-family: "Century Gothic", arial, sans-serif;
border-radius: 8px;
font-size: 12px;
font-weight: bold;
padding: 2px 2px 2px 5px;
margin:0 auto;
overflow: visible;
}
I notice that on jsfiddle the div appears long although I've limited it by width. I've also added Overflow:Visible but did not work. Would appreciate any advise. Thanks!
Change:
width= 150px;
To this:
width: 150px;
Related
You can visit the site I am trying to work on here.
I am trying to get basically the layout as in the top right box in the bottom right box, but for some reason I cannot get it to float to the right. Is there something I am missing here? It's driving me nuts because my code works in the upper box but not in the lower one.
Here's the HTML.
<div id="menu-ad">
<div>
<p class="titles">Our Fare</p>
<p id="ad">Our lunch and dinner menus feature European inspired comfort food accompanied by an extensive bar.</p>
VIEW MENU
</div>
</div><!--end menu ad-->
<div id="hours">
<div>
</div>
</div><!--end hours-->
</div><!--end container-->
And the CSS.
/*menu ad*/
div#menu-ad {
position: relative;
margin-right: -11px;
margin-top: -11px;
width: 268px;
height: auto;
float: right;
padding: 11px 11px 10px 10px;
border-left: 2px solid #b9aea3;
border-bottom: 2px solid #b9aea3;
overflow: hidden;
}
div#menu-ad div {
background: #f9f4df;
padding: 1.9rem 4rem 2.5rem 2.5rem;
height: 200px;
display: inline-block;
}
.titles {
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 2.5rem;
color: #d6832e;
}
#ad {
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 1.6rem;
line-height: 1.35;
color: #4f4d4b;
margin-top: .5rem;
width: auto;
}
a#button {
padding: .6rem 1.3rem .6rem 1.3rem;
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 1.8rem;
color: #fff;
background: #d6832e;
text-align: center;
vertical-align: middle;
text-decoration: none;
position: absolute;
float: left;
bottom: 3.5rem;
}
/*hours*/
div#hours {
position: relative;
margin-right: -11px;
margin-top: 11px;
width: 268px;
height: auto;
float: right;
padding: 11px 11px 10px 10p;
border-left: 2px solid #b9aea3;
}
div#hours div {
background: #f9f4df;
padding: 1.9rem 4rem 2.5rem 2.5rem;
height: 150px;
display: inline-block;
}
Thanks for any help! It's probably something simple and I just need a fresh pair of eyes.
you seem to have a typo,
under the style rule for
div#hours
you have
padding: 11px 11px 10px 10p;
your missing an 'x' at the end. Which means the padding rule is not being applied
Now this solves the alignment, but the height might not be right now, but I'm sure that should be straight forward
My website will not center no matter what I do to it. I have tried
margin: auto 0;
I have tried
margin-left: 50%;
margin-right: 50%;
and the most success I have had is getting the entire website aligned to the right, which is not quite what I was shooting for.
Here's the CSS that controls the alignment of the site, as well as other details. If you could hep me I'd greatly appreciate it.
#Content {
width: 1200px;
height: 850px;
padding: 5px;
margin-left: 50%;
margin-right: 50%;
background-color: #006600;
font-size: 12px;
font-color: #000;
text-align: center;
font-style: normal;
font-family: Arial, Helvetica, sans-serif;
}
Andrew is right, it should be:
margin:0 auto;
This is expressing margins in shorthand format. When only 2 values are given, it is interpreted as:
margin: (top and bottom value), (left and right value);
So
margin: 1px 2px;
means
margin-top: 1px;
margin-bottom: 1px;
margin-left: 2px;
margin-right: 2px;
More info here
margin:auto; works fine. here check the demo.
Fiddle
Full Screen Demo
just replace
margin-left: 50%;
margin-right: 50%;
with
margin:auto;
Full CSS
#Content {
background-color: #006600;
margin:auto;
padding: 5px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-color: #000;
width: 1200px;
height: 850px;
}
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
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 thought line-height would vertically center align text. But this is not happening for my button. Why?
The text is bottom aligned in FF, Opera and Safari.
Her is my fiddle.
<button class="get_discount_rate">Button</button>
button {
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
color: #444;
min-width: 90px;
height: 24px;
line-height: 24px;
margin: 5px 10px;
background-color: #fdfdfd;
border: 1px solid #cdcdcd;
cursor: pointer;
border-radius: 3px;
}
Vertically center aligned text inside button (Tested in Chrome, FF, Safari, Opera and IE8)
button {
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
color: #444;
min-width: 90px;
padding:5px;
margin: 5px 10px;
background-color: #fdfdfd;
border: 1px solid #cdcdcd;
cursor: pointer;
border-radius: 3px;
}
DEMO.