See this page i'm currently working on.
http://lacrosselaundry.com/lacrosseLaundry/contact.php
If i change the font-size for 6 from 14px to 18px it moves the form to the right. Why is that?
I want the form to be all the way over to the right like when the h6 font is 18px, except i want the h6 font to be 14 px. How do I fix this and why is it happening?
How about setting element sizes? Works for me in firebug.
#main {
width: 100%;
}
.clearLeft {
width: 300px;
}
As for reasons, .rightDiv moves (despite having align: right) because parent container (#main) width increase. I.e., you increase font size and container stretches to accomodate changes. Normally divs take up all available width, but having float: left overrides that.
You can try to set the width of #main to 100%, so the #main .rigthDiv element would truly float to the right.
Related
I have a header box appearing on a page.
I am using h2 and configured this to show a border etc.
My issue is that the longest text requires a box of 400px wide, whereas the shortest is probably around 100px leaving a large gap.
Is there any way to control the width of the h2 over and above setting a fixed width in css?
Try this
div{
float: left;
width: auto;
background-color: #777;
}
DEMO
yes you can apply float: left to H2
How can I make box (border-radius) size bigger in CSS3? If I set height property, such as height:10%, it doesn't change, but width:10% makes the width of box wider. I don't know why such inconsistency occurs. Also, when I resize the height by height: 100px, the box size changes, but the text size remains the same, despite writing vertical-align: middle. So how can I correctly make the box size larger but the text position is located in the middle of the box?
Also, why does the position of box move when the mouse hovers over the box and not?
I wrote JSFiddle here
you can not hide that div you can only make it transparent
div{
background:transparent;
}
you can read this Easily center text vertically, with SVG if you want to use svg.
the position of the box changes because of padding: 0px;
.dropdown:hover .dropdown-menu {
display: block;
padding: 0px;/* remove this*/
margin: 0px;
}
and bootstrap is added on you left side not in the css
and the correct link for that looks like this
under External Resources
//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/css/bootstrap-theme.css
Demo: http://jsfiddle.net/rXNmA/2/
and for the position of the text you can use the
class=text-center
and
line-height: 2em;
or
line-height: 2%;
depending on what you want to achive
Demo:http://jsfiddle.net/rXNmA/5/
It doesn't take the percentage height, because this div size depends of the "whole page" tall. Change the body to 100% height and it will work.
html, body {
height: 100%;
}
div {
height: 10%;
}
Vertical text alignment
This is my site.
I'm trying to make the image at the top span 100% width of the browser.
However, i'd like the text to remain the 800px width it is now – and keep it centered.
at first sign you need check all margin and padding. And set all parent node width:100%
From your css i see
#site {
margin: 0 auto;
padding: 50px;
}
At least 50px from each side will be there
I want to have the content of my website centred but only for a certain width of a webpage. So when it's over say 500px I'd want the content to then be fixed, unable to stretch any further. Is there anyway to do that, or am I best having everything fixed? Hope that makes sense ill add some visuals to be a bit clearer..
thanks!
http://i38.photobucket.com/albums/e126/aaron123456/stackflow.jpg
1.auto margin with a certain space
2.so content doesn't float in the middle of a larger webpage
It's quite simple:
#container {
max-width: 500px;
}
#container > * {
margin: 1em auto;
width: 300px;
}
#container defines the maximum width, and every element placed inside it is aligned centered. I had to set the width to prevent these elements from requiring the entire width.
See it in action
I've tried the CSS below. All of the other specifications are working except the width. You can see an example of the being too wide here if you need to.
Thanks for your help - Tara
.title h2 {
margin:10px 0 0 0;
width:780px;
font-family: HarabaraHandItalic;
font-size: 30px;
padding: 0 0 0 15px;
color:#000;
}
The width you're using is too wide. Try to make the width 750px for example. You'll see that it works fine!
Keep in mind that the padding will be added to the width of the element.
In your case the h2 element is 780px (width) + 15px (padding-left) = 795px.
It is working fine here.
I suspect you are being confused about what width means. The property describes the content width. The padding (15px) and borders (0px) and margin (0) all appear around the width.
The container is only 670px wide anyway, so you probably don't want something that is 795px across (width plus padding) inside it.
You need to reduce both the "width" and the "font-size" to make it fit.
Or, if the font-size needs to stay the same, you need to reduce the amount of copy.