I'm having a simple (but frustrating) issue with my background. I currently have it as a static background image and a solid color for my content space. For some reason the content color is not showing up? I feel like i've gone through everything to fix it but no dice. Any suggestions?
body {
margin-left:auto;
margin-right:auto;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1em;
line-height: 1;
background-image:url(../img/bglogo.jpg);
background-attachment:fixed;
}
#contentcontainer {
max-width: 960px;
margin: 0 auto;
float: none;
padding-top: 0px;
padding-left:10px;
background-color: #fffdf8;
}
The website in question can be found here: http://mikesbaum.com/plan9alehouse/index.html
You are using Floats to position your divs side by side. As such, the parent div does not have access to the height of those divs as they populate. This leaves the parent div at 0px height, making it invisible on the page.
Add 'overflow:auto;' to your #contentcontainer class and you should be all set.
It's because the contents of #contentcontainer (home, about, etc.) are all floated, and you're not clearing it. When you do this, the parent element doesn't wrap the child element. If you look at the height of #contentcontainer you will see that it is set to 0.
To fix this, you need to clear the floated sections. the quickest way to do this is to just add an empty div as the last child in #contentcontainer with the css clear: both;:
<section id='contentcontainer'>
<section id='home'>...</section>
...
...
<div style='clear: both;'></div>
</section>
Usually if you find yourself clearing floats a lot, most people will create a clear or clearfix class, and just use the class name for the div instead of using inline css.
Related
I want my page to have a fix width, lets say 1440px. I usually put width in body and it applies to all elements. In my new project I need to have one section in white background, width being fixed makes it so that only 1440px is white. I managed to solve this by removing width from body and creating a class:
.width-fix {
width: 144rem;
margin: 0 auto;
padding: 0 1.2rem;
}
I set that class as additional to every section I don't needed colored.
Is this the right way to solve it or is there something better? Currently it works like a charm.
I started learning HTML/CSS 2 weeks ago, sorry if its dumb question
**Edit: Image for clarification
Yes, usually I work with a classname like container or section for all the most general default styling.
Every element is packed in a section which holds the right background-color and has a div with container for the right width and margins and padding.
So something like this:
.block {
background-color: green;
}
.container {
max-width: 1440px;
margin: 0 auto;
padding: 25px;
}
<section class="block">
<div class="container">
</div>
</section>
I am very new to CSS. I am creating a DIV and somehow the text is being displayed in middle of the DIV. There is a white-space appearing above the first line of the text.
I am also providing the CSS that I wrote for this DIV.
CSS Code
#CONTAINER {
float: left;
height: auto;
padding-top: 0;
border: 1px solid black;
vertical-align: top;
}
#CONTAINER p {
padding: 0;
margin: 0;
vertical-align: top;
}
Here is the Link to the page. Please refer to the last Div which says Latest News
[enter link description here][1]
In your "Latest news block," there is an h2 element outside of the div that your text is in that is pushing everything down.
<div id="block-nodeblock-21" class="block block-nodeblock">
<h2>Latest News Block</h2> <!----this guy-->
<div class="content">
The element is invisible because you set visibility:hidden, however this does not remove it from the page, so it still affects the position of everything around it. To make it truly hidden, you can
Remove it OR
Set display: none;
First off we need your HTML that goes with it, however also remember that the P tag has got its own whitespace added by default, try - values for your padding under
#CONTAINER p
It is possible, that outside the div, you have set the "text-align" property to the value "center". Out of interest, does this occur in any other browsers?
HTML is
<div class="jfmfs-friend-container">
<div class="jfmfs-friend ">
<input class="friend-checkbox" type="checkbox">
<img src="/picture">
<div class="friend-name">Test User</div>
</div>
</div>
Here I am able to achieve all three elements checkbox, img and friend-name div in a single line. I am looking for following:
checkbox and friend-name in verticall middle to the img.
Word wrap in the friend-name div
All elements with equal distance (atleast 5px) to each other. Right now all 3 are adjacent to each other with no space
Here is my CSS. I am giving css code for the parent div incase of any display:block property:
.jfmfs-friend div {
color:#111111;
font-size:11px;
overflow:hidden;
display:inline-block;
}
div.friend-name {
margin-left: 10px;
vertical-align: middle;
word-wrap: break-word;
}
.friend-checkbox {
position: relative;
vertical-align:middle;
display: inline-block;
}
#jfmfs-friend-container {
overflow:scroll;
overflow-x: hidden;
-ms-overflow-x: hidden;
width:100%;
height:400px;
font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
color: #333;
font-size: 12px;
}
Demo: http://jsfiddle.net/55twK/
Set vertical-align:middle to all three elements, now you miss img.
Now all three elements works like inline elements and if there will be more text div can wrap itself to the new line. So one of the options is to set width or max-width to the div.
Horisontal margins and paddings works fine for inline elements.
To center your elements in the "jfmfs-friend" div, you need to add this css:
div.jfmfs-friend {
text-align: center;
}
To make the word-wrap in your "friend-name", you need to set the width. Currently it will expand to the size of it's parent. Setting the width of the "friend-name" dive or one of it's parent containers will cause the text to break when it meets the edge of the element.
To get your elements to be separated from eachother, you need to play with the padding and margin css properties until you get the desired effect. Adding a padding of 5px to each element would probably do what you want.
.friend-checkbox, img, .friend-name {
padding: 5px;
}
You can use jsfiddle.net to tweak your layout and get a live preview. This will help you get the spacing you desire.
Also, check out these references on the padding and margin properties.
I am sorry if this is a bit of a n00b question but for the life of me I cannot get this lightbox gallery lined up centrally inside my "content" div.
http://www.justthisdesign.co.uk/bathroom-gallery.html
I am ashamed to be asking such a stupid question but honestly I have tried everything. I have given the last image in each row a class of .last, then played around with padding-right and margin-right but it seems to have no effect.
Use <div id="content" class="clearfix thumbs" style="text-align: center;">
Use Margin 4 For all of your Pics in the gallery on the both sides than just Right side!!.You can Remove horizontal padding of content div and adjust the padding area in the width of the div.
text-align: center; on content div.
give your content div a text-align:center; and give your last images in each row a margin-right of 0 otherwise you will have the extra space on the right side.
#content {
padding: 15px 30px;
background-color: #F8F8F8;
}
Instead of padding try use margin:
#content {
margin: auto;
width: 900px;
background-color: #F8F8F8;
}
And mess around with the width to control its position.
hope this helps.
Okay guys I have a question about positioning tables within DIV's using CSS.
I have code as follows:
css:
#content{
float:right;
padding-top:10px;
width:450px;
line-height: 18px;
font-size:13px;
text-align:left;
}
#content .reviewTable{
width:20px;
}
#news{
line-height: 18px;
width:150px;
}
#news h2 {
margin: 0;
padding: 0;
font-size: 16px;
}
#news p {
margin: 0;
padding-bottom: 20px;
padding-right:10px;
font-size:13px;
}
HTML:
<div id="content">
<div class="reviewTable">
<table>
<td></td>
</table>
</div>
</div>
My table sits far away from my news DIV there is some padding around the news DIV however I have removed that and it didn't make any difference to the positioning of the table. I have been looking at other Stack Overflow posts but can't seem to find what I am looking for. I have tried absolute and relative positioning in my CSS and also width and none of these work not the table where they have worked on other elements such as plain text.
I have also tried the table as <table class="reviewTable"></table>
My question is does the code need to be in a certain format in order to allow the positioning of tables in a DIV which already has CSS formatting applied to it?
Just looking for a hint in the right direction guys if you could help me out or anyone else has a similar problem as this it would be great.
Thanks
The reason your table is flowing outside is that you are floating it right. Then you have the width set to be too small for the review area so it makes it go outside. Change the width of the #content to 600px and you'll see what I mean.
For the way you have it setup you need to set the #content to 610px. Set the #page-container to overflow:hidden to prevent anything showing if its outside your container. And take off the width on .reviewTable