I want to get rid of the space below my header logo in Garland.
I know the header is 80 pixels tall, but when I try changing that value it messes up other things.
I want to reduce the dark colored section below my logo (which is empty) by 20 pixels, and also get rid of the lighter colored section that appears just above the main column (and is about 20 pixels tall).
You can see my site on http://www.energyjustice.net.
Remove the background css properties on the "right corner" and "left corner" divs. Next, remove just the url section in the background property in the "squeeze" div.
Add this to the "squeeze" div:
margin-top: 45px;
Replace the padding in the "left-corner" div with this:
padding: 0px 25px 5em 35px;
Now, you can lower the pixels in the height property of the "header" div to bring everything up. Finally, you'll need to shrink the red background image that appears in the "wrapper" div with a simple paint program so that it doesn't clash with the rest of the content.
*Or if you want a quick and dirty fix, change the background property in the "wrapper" div to
background: #FBF9F2 url(body.png) repeat-x 2% -1.4%;
Related
Initially, I want to put words into this circle. Maximum character number is 20.
I want to set font size around 24px and the circle's width and height are 100px;
However, the 2nd word fell outside of the circle.
Can anyone help?
http://codepen.io/yumikohey/pen/ocFtJ
Here is my code.
<div class="blog_circle">
Channel Buzz
</div>
.blog_circle{
width:100px;
height: 100px;
border-radius:50px;
font-size:24px;
color:#000;
line-height:100px;
text-align:center;
background:#45C2B3;
margin-left: 50px;
margin-top: 50px;
}
On the other hand, how to make the font size change depends on user's inputs?
why do you have a line-height:100px? It is too high and that is what is causing it to fall outside the circle......
change it to say 40px........here is the demo
UPDATE:
add display:table-cell; to your style. This will center the text vertically in your div. when you actually inspect element and look at the div, the text is at the center of the div vertically. Updated FIDDLE
your circle is actually a square with width and height of 100px and its corners are trimmed by a distance of 50px giving the visual of a circle.
now you have your words with their font sizes but you also have line-height mentioned as 100px . Now this is like , imagine a page of ruled paper ( the one that has lines to write) line height defines the size between two lines. now in your case the line height is 100px which is the height of your entire box. If you lower the line height to say 50px (which will give you 2 lines to write on inside that 100px height box) it should work.
hope this helps
Try using padding and changing line-height and a few other things. DEMO
I am trying trying to make a div's width as wide as it's content. Here's a fidle to show what I mean:
http://jsfiddle.net/djxpU/
I want the blue area to be as wide as the white. I tried float:left and display:inline-block, however they won't work with position:absolute;. Any workarounds?
If you want the white area to fit the blue parent, you'd set the width of the white to 100% #X{
width:100%;
}
Block-level elements actually do this naturally. The problem you have is, absolute positioned elements are taken out of the normal flow, so the block can't wrap around your white boxes.
Is there a reason you need them positioned absolute?
EDIT: If you just wanted the white boxes to be centered, here you go: http://jsfiddle.net/Marconius/djxpU/1/
Code (because I have to): margin: 0 auto;
By default a div will be the width of its parent and will display as block. Here is an example of the divs filling the available space while still maintaining the left margin.
Apply this to your 'X' divs: { margin-left: 120px; height: 40px; background-color: white;}
http://jsfiddle.net/yz3Dk/
I actually wrote here a whole page of text, but it was impossible to understand and putting a jsfiddle is just easier for you guys.
here it is: http://jsfiddle.net/pMdZK/
the problem is links dont work, if they do hovers doesnt work and I have tried solutions like clearfix.
Both "container" and "default" divs are essential to me and they are actually 2 images that meant to overlap each other(one is half-transparent, gif image with some parts missing. that is to change that image later for other stuff, while user is in page.)
also changing
position:absolute
doesnt seem to do much either.
Changing the padding-top of all items into margin solves your problem. The reason is that padding extends the entire entity while margin pushes the other entity's away.
http://jsfiddle.net/pMdZK/1/
You had:
#containerx #pl6
{
padding: 521px 0 0 120px;
position: absolute;
font-size: 22px;
}
You need:
#containerx #pl6
{
margin: 521px 0 0 120px;
position: absolute;
font-size: 22px;
}
change this for every item ofc.
The difference between margin and padding:
Margins and padding can be confusing to the novice Web designer. After all, in some ways, they seem like the same thing: white space around an image or object.
Padding is the space inside the border between the border and the actual image or cell contents. In the image, the padding is the yellow area around the contents. Note that padding goes completely around the contents: there is padding on the top, bottom, right and left sides.
Margins are the spaces outside the border, between the border and the other elements next to this object. In the image, the margin is the red area outside the entire object. Note that, like the padding, the margin goes completely around the contents: there are margins on the top, bottom, right, and left sides.
To further explain the difference i made a quick jsfiddle.
http://jsfiddle.net/GRLkt/
The padding box expands the entire div. (as you can see by the background image).
The margin box pushes the other content away.
There are a lot of questions regarding side-by-side divs. I didn't miss those. But I need something that spans the whole width of the screen. This is the situation:
I need three divs positioned side-by-side. The left, middle, and right divs we'll call them. The middle div holds the header contents of the site and is a fixed width (800px). I want the left and right div to span the rest of the screen width on either side. So..
<-LEFT-> | MIDDLE | <- RIGHT ->
The reason I want to do it this way is because the middle (content holding) div has a backgrond that is a gradient. Let's say the left side of the gradient is white and the right side is black. I need the Left div to be white so it is a continuation and the Right div to be black. This way it looks like one fluid heading that spans the whole width of the screen.
Thanks.
A solution for this problem I once implemented was using 2 div elements, absolutely positioned, with the center div as an overlay. I have a working example here:
jsFiddle solution
This way, it doesn't matter how wide the screen is: The div's span 50% of your screen, and the middle part is behind the centered div.
Note that you might have to use a javascript workaround for the height-issues.
Do you want content in the left or right divs? If not, Simply stick with your one center div, give it a width and position it using margin: 0 auto; in your css. You can then set the background image of the body tag with an image (say 1px by 2400px) that is half white and half black.
If you want that effect just behind your header, then you could create a div the same height as the heading and give it the following css properties:
position: absolute;
width: 100%;
z-index: -1;
that way it should sit behind your container (middle) div.
You should consider having just one centered div and on the body put a background-image of 1px height and large enough width and centered. That image will have the left half white and the right one black.
Hope this helps, Alin
...WWWWW| DIV |BBBBB...
Anyway I don't think it's possible without using a table.
Usually floatting div are size-fixed and center div is fluid.
The web site is here.
See that blue bar behind the menu items? It's 40 pixels high and one pixel wide, and used as a repeating background - so, why does it look strange after the right-most menu item?
The image is here, if anyone needs it.
The image is used thusly:
.menu_bar
{
background-image: url("http://leonixsolutions.com/images/menu_background.jpg");
background-repeat: repeat-x;
font-size: large;
padding-left: 160px;
padding-top: 5px;
text-align: center;
}
Nothing is wrong with it,
Your menu container div.pd_menu_01 has a background color #ffffff remove it and you'll be fine...
The real problem here is that .pd_menu_01 extends too far to the right (and with its white background, covers the gradient). Try making it inline-block with an auto width, or something similar, so that it doesn't extend further to the right than it has to. You could also set its background color to transparent (but in my browser, .pd_menu_01 makes the page too wide and thus introduces unnecessary and ugly horizontal scrollbars, so the width solution is still relevant).
.pd_menu_01 has a background color of white declared, and is a div. Since divs are block level elements, they have a default width of 100%.
Either declare the div to be display:inline, wrap the menu in a span instead of a div, or make the background color transparent instead of white.