all. I have this problem where I have explicitly set out how wide a certain div dhould be, yet it ignores it.
I have a wrapper, and in it I want side by side a sidebar and a content bar. The content bar seem to be pushing away the sidebar and filling up all the space.
Code in Question:
#wrapper{
font-family: "Georgia", serif;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -2em;
width: 700px;
position: relative;
}
#content{
float: left;
width: 400px;
padding-left: 25px;
padding-right: 50px;
}
#sidebar {
float: right;
width: 175px;
padding-right: 25px;
}
And the HTML is simply
Blah Blah Blah
In a nutshell
I put Lorem Ipsum where content is, and I put some Lorem Ipsum in the sidebar. Element Inspector in chrome shows content to be 700 pixels wide, even though i declared it to be 400px. I dont care about ie6 compatibility really.
http://imgur.com/A1w0a Is how it should look.
Someone said somehting about fiddles. Am I doing this right http://jsfiddle.net/R3Wyw/1/
The big Lorem Ipsum chunk be skinnier, only 400 pixels of text, while the sidebar should move up and slot in beside it.
You've basic HTML and CSS syntax problems in your code:
HTML ending tags should be written </div> and never ever </div id="content">.
Good:
<div id="content" class="something" role="main">
<p>Content</p>
</div>
Bad:
<div id="content" class="something" role="main">
<p>Content</p>
</div id="content" class="something" role="main">
CSS comments must be written /* a CSS comment */, not <-- HTML comment -->
You should try to validate your code in http://validator.w3.org (HTML) and http://jigsaw.w3.org/css-validator/ (CS) before posting (use the Web Developer Toolbar extension on Firefox to do it fast).
Error messages are sometimes a bit cryptic but they're always the same ;) Google for them to get explanations or ask here on SO.
For width problems, I add different background-color to elements and parents, to better see which one isn't as expected (and which one has only floating children and thus no real content in the flow anymore thus no height thus no visible background color...). Like lightblue, lightgreen, pink, lightyellow, etc This and MeasureIt! extension on Fx.
Related
I have started to try to build a really easy website and trying to make it responsive. Something in the style of http://www.squarespace.com/ (Split up in different sections with different backgrounds etc that you just scroll throu) But i have a problem that I really cant figure out right now, I don't know how to make the foundation for this kind of site. I got the "menu" part quite nice, but as soon as I try to but some content on the first "part" or try to start the second part I run into trouble.
To try to explain I have two < p > that I tried to put on-top of the first part, and below to make the second part. I guess the explanation is not perfect, but hopefully the code can clear up my issue abit :)
Edit: Just took some random pictures to be able to show...
#logo img{
z-index: 10;
left: 4%;
top:20px;
max-width: 50%;
height: auto !important;
position: absolute;
}
#signup img{
z-index: 10;
right: 4%;
top:20px;
max-width: 50%;
height: auto !important;
position: absolute;
}
#main-container img {
width: 100%;
height: 100%;
max-height:308px !important;
position: absolute;
top: 0;
left: 0;
margin:0;
}
#second-container {
}
<div class="container">
<div id="menu">
<div id="logo">
<a href="example.com">
<img src="https://tcrf.net/images/d/de/FBEAR-nosave.png" alt="" />
</a>
</div>
<div id="signup">
<a href="example.com">
<img src="https://tcrf.net/images/d/de/FBEAR-nosave.png" alt="" />
</a>
</div>
</div>
<div id="content">
<div id="main-container">
<img src="http://www.reallifeglobal.com/wp-content/uploads/2015/03/background-radi-700x300.png" alt="" />
</div>
<p>Ontop of background</p>
<div id="second-container">
<p>Under background</p>
</div>
</div>
</div>
https://jsfiddle.net/gt2d6aa7/
Since the image in main-container is not set as a background image and it comes before the paragraphs in the source code, it is appearing on top of the paragraphs.
2 things you could do to get the paragraphs to show:
1) Set a position property on the paragraph style to make it appear on top of the image:
div.container p{position:relative;}
2) I would suggest setting that image as the background of your container and giving it a minimum height (in case your content does not increase the container size enough to fully see your image). Like so:
<div id="main-container" style="background-image:url('http://www.reallifeglobal.com/wp-content/uploads/2015/03/background-radi-700x300.png');background-size:100%;min-height:300px;background-repeat:no-repeat;">
Then, make sure to close your main-container before opening the second-container, that way it creates a clean section for different content. The way you have it, second-container is inside the main-container and any content that you wanted to appear below the main background and top content would actually just appear on top of the main-container background.
The Squarespace site you linked to is a good example visually, but if you inspect their code it gets a little confusing for a beginner, since they are nesting the bottom sections (below that video presentation) in a section within in a div.
Twitter Bootstrap has some good examples of one-page layouts with cleaner markup to follow. This is a good example: http://blackrockdigital.github.io/startbootstrap-landing-page/
Here are their other examples: http://startbootstrap.com/template-categories/one-page/
I am not an advocate of Bootstrap, since it adds a lot of unnecessary bloat in most cases, but these give a good indication of how to structure your page.
Good luck!
I'm trying to layout a page which has anchor elements that I would like on a new line and centered. However these blocks are inside of <p> elements which are beside floating images.
Right:
http://test.sunnysidemarket.ca/right.jpg
Wrong:
http://test.sunnysidemarket.ca/wrong.jpg
So basically I have:
HTML:
<div class="content">
<div>
<img src="..." width="276" height="207" />
</div>
<div class="body">
<p>
...
<a class="mediaset" href="...">Link</a>
</p>
</div>
</div>
CSS:
.content img {
float: right;
}
a.mediaset {
margin: 0 auto;
width: 220px;
display: block;
overflow: auto;
}
Or what you can see in the jsfiddle: http://jsfiddle.net/CVkFw/
The issue is intermittent, sometimes it happens, sometimes it doesn't. What it appears to me to be is a bug in chrome where the overflow and margin properties are calculated but when the floating content loads, sometimes the browser doesn't layout the elements again.
There are ways of solving this using jQuery and modifying my HTML but I would really love to solve this with CSS if at all possible.
My best guess is that this erratic behavior is caused by overflow: visible applied in global.styles.css. The problem:
.node-article .field-name-body,
.node-synced-facebook-content .field-name-body {
overflow: visible;
}
I'm offering this suggestion because when I add this CSS override for overflow: hidden, that component appears to load "more solidly". The fix:
.node-article .field-name-body,
.node-synced-facebook-content .field-name-body {
overflow: hidden;
}
The selector itself might need to be adjusted depending on what it is intended to affect. (I'm obviously not that familiar your page's css code.) Hopefully this points you in the right direction though!
I'm not really sure how to best explain this. I'm trying to have three div elements positioned side-by-side; the first (left to right) is flexible-width, the second is also flexible width, the third is static width and it floated to the right. The first two are inside a div on the same level as the third; that is to keep to total width of the first two under a max-width.
Here is a jsfiddle of what I'm doing.
My problem is that when the text in the middle div is long, the middle div will drop below the first one, instead of having the text wrap. I can't give the middle one a max-width, because the first div is flexible and could get smaller. Any idea how I can go about fixing this?
I know it can be achieved by using a table, but I'd really prefer not doing so unless it's the only easy solution.
Edit: I decided to just do fixed width. The amount of work for required for this just wasn't worth it, especially considering that most of the time, the flexible width would never be used for me anyway.
if you wan a pure css based solution then it might be little difficult and also not much browser compatible. Though you can achieve this by using the css property called display:table ; and display:table-cell;. Again older browser, maybe IE-9 also won;t be able t render this.
Then you should go for the jQuery solution. You can use the following code-
$(document).ready(function(){
var w = 400 - $('.inner_container .left_box').width();
$('.inner_container .middle')css('width',w);
});
Thanks.
The display: table property and related properties, such as display: table-cell, have been supported in IE since version 8 -- as well as all versions of Firefox and Chrome/Safari.
Reference: http://caniuse.com/#feat=css-table
I believe it's the way to go in your case.
HTML
<div class="container">
<div class="inner_container">
<div class="left_box">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="middle">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="right_static">Hi!</div>
</div>
CSS
.container {
position: relative;
width: 500px;
border: 1px solid #000;
overflow: auto;
}
.right_static {
position: absolute;
top: 0px;
right: 0px;
width: 100px;
background-color: green;
}
.inner_container {
display: table;
width: 400px;
overflow: auto;
}
.left_box {
display: table-cell;
background-color: red;
}
.middle {
display: table-cell;
background-color: #9999FF;
}
DEMO
http://jsfiddle.net/nd7qj/
By the way, you mentioned in your question that the leftmost div should have flexible width, but in the CSS you provided it had fixed width. So I didn't apply a width to it in my code.
I have a page that basically displays all work orders for a given day. I have tried to create the HTML so that I can use page-break-after: always to create a logical print page break and continue on. However when the user prints the page, there are often overlaps, multiple work orders on the same page, etc. I simply want to enforce a hard page break that Firefox, Safari, and Chrome will listen to.
My HTML looks like this
<div class="WOPrint">
<div class="WOHeader">
<h1>Header stuff</h1>
</div>
<!-- content -->
</div>
<div class="WOPageBreak"></div>
<div class="WOPrint">
<div class="WOHeader">
<h1>Header stuff</h1>
</div>
<!-- content -->
</div>
<div class="WOPageBreak"></div>
<!-- repeat N times -->
<div class="WOPrint">
<div class="WOHeader">
<h1>Header stuff</h1>
</div>
<!-- content -->
</div>
<div class="WOPageBreak"></div>
and my CSS is basically like so:
.WOPrint
{
max-width: 100%;
padding-bottom: 3em;
}
.WOHeader
{
display: block;
page-break-inside: avoid;
}
.WOPageBreak
{
height: 1px;
width: 100%;
float: left;
page-break-after: always;
display: block;
}
EDIT
In a hackish attempt I have played around with setting the WOPrint class min-height. Changing it to 9 inches seems to give me enough margin room for printing from all Safari, Firefox, and Chrome when I have it set to a standard US paper size. This is certainly not the way I would like to fix it, but I also don't want to have to render to PDF.
.WOPrint
{
max-width: 100%;
padding-bottom: 3em;
min-heihgt: 9in
}
short answer. You can't it's not consistetly supported across all browsers. there is slightly better support for page-break-before than page-break-after though...
see page-break-before compatibility and page-break-after compatibility
you could also try embedding a Ctrl-L in the page at those points thought I'm pretty sure a lot of printer drivers are gonna ignore that.
By setting the min-height in the WOPrint CSS class I'm able to fake an approximate page break for a standard height page:
.WOPrint
{
max-width: 100%;
padding-bottom: 3em;
min-height: 9in;
}
All you need is
.WOPageBreak
{
page-break-before: always;
}
However, you'll also want to add "overflow:visible" to the body tag because without it Firefox will only print the first page.
You may also get more consistent results if you set margin:0 on the body when printing, like so:
#media print{body{margin:0}}
I understand that there are several questions here about this problem, but I have a rather unique predicament. I'm working on a template that has to include certain tags, and has to work with other elements that are added to the template after I upload the code. I wouldn't worry about this, but I am having a time trying to get the footer to display at the bottom of the page. I can't alter anything about the footer, and it displays at the bottom of the div I'm using as a wrapper. The problem is if I set the height to a fixed value, there can only be so many comments made before the comment div overlaps the footer. I've tried several different solutions including setting the container div's height to auto, overflow to auto, bottom margin to 65 (height of the footer), and setting the overflow to scroll for the Comments div (resulted in very loose comments).
Here is an example of the problem and the template as it stands.
Here is the CSS styling for the container div (div id=Main)
#Main {
margin: 0px auto auto auto;
background-color: #808080;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: medium;
font-variant: normal;
color: #FFFFFF;
width: 900px;
position: relative;
}
Here's the CSS styling for the Comments div
#Comments {
background-color: #008080;
width: 450px;
height: auto;
top: 1750px;
left: 450px;
position: absolute;
overflow: auto;
}
And here's how the divs are stacked in the body
<div id="Main">
...
<div id="Comment_Form">
<!--[COMMENT_FORM=400,200]-->
</div>
<div id="Comments">
<!--[COMMENTS=400]-->
Comments
</div>
</div>
Since the page is going to be image heavy, I'm trying to keep the code lightweight (and probably failing at it pretty badly).
Thank you for your help and I'll post the template as of now if anyone needs it.
EDIT:
Okay, it's occurred to me that a) I need to redo the CSS and the divs that I have down, and b) I have no clue how to do it using pure CSS, or at least with out fighting it as one of you has said. What I'm trying to achieve is this:
I have no clue How to do this. and any help would be greatly appreciated (as well as any way to avoid having each and every element in its own div)
You seem to be really fighting your CSS on that page. Most of your elements are positioned absolutely within your #Main class. This will force you to specify a lot more layout than you really want to. It also means that if you have a variable quantity of comments or dynamic content, you'll find it that much harder to expand your content containers without others getting in the way.
I would strongly urge you to look at CSS frameworks or approaches that take advantage of grid layouts such as Nicole Sullivan's OOCSS framework.
You'll find that the structure (which has plenty of good, workable examples) is easy to follow and lends itself much more readily to the sorts of layouts that you're trying to achieve.
I hope this is helpful.
Here is a very basic layout that you can use.
In your CSS:
#header, #content, #comments{
margin: 0 auto;
width: 960px;
overflow: hidden;
}
#author-comments{
width: 100%;
}
#comment-box{
float: left;
width: 50%;
}
#comment-list{
float: right;
width: 50%;
}
In your markup:
<div id="header">
Header
</div>
<div id="content">
Contents
<div>
<div id="comments">
<div id="author-comments">
Author comments
</div>
<div id="comment-box">
Comment box
</div>
<div id="comment-list">
Comment list
</div>
</div>
It's really important that you use markup that makes sense without the styles. Don't see divs as plain boxes but as actual content containers that give structure to your document.
On a side note, you mentioned that you were concerned about the ammount of divs to keep your file light, compensating for the amount of images you're using. Don't worry about this. Text documents (such as HTML) are nothing compared to images in terms of file size. However, his doesn't mean you should throw markup as if it was free ;)
One last thing. I noticed that you are using <img> elements to render your decoration images. Try using CSS to set them as background images in the corresponding <div>s. This not only will help you to make cleaner and easier to implement structures, but also will draw a line between the images that represent content and those that represent decoration.
I'll write without any testing how I would code the layout on your image:
HTML:
<div id="header" class="centered"></div>
<div id="content" class="centered">
<div id="navigation"></div>
<div id="content"></div>
</div>
<div id="comments" class="centered">
<div id="author-comments" class="centered"></div>
<div class="centered">
<div id="comment-field"></div>
<div id="user-comments"></div>
</div>
</div>
CSS:
* { margin:0px; padding:0px }
html { height:100% }
body { height:100% }
.centered { position:relative; margin:0 auto; width:960px }
#header { height:100px; background:#333 }
#content { overflow:hidden }
#author-comment { overflow:hidden; margin:30px auto }
#comment-field { position:relative; float:left; width:480px; overflow:hidden }
#user-comments { position:relative; float:left; width:480px; overflow:hidden }
Sorry, got no time to test now, but on first view, I don't see any problems with this code - write comments, if something doesn't work