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
Related
I'm trying to replicate the following table of contents:
You can see my attempt here and see the problem: I don't know how to keep the chapter titles restricted to a specific width so that they don't wander over to the page numbers. I've tried things like width:250px and margin-right:30px; and padding-right:30px;, but to no avail.
Here's some of the code:
.conts {
font-size:80%;
text-align:justify;
text-indent:-1em;
margin-left:1em;
margin-bottom:1.5em;
}
<div style="text-align:center;font-size:80%">CHAP. IX.</div>
<div class="conts"><span><em>Of the different Degrees of Virtue and Vice</em>, <em>and the methods of estimating them</em>. <em>Of Difficulties attending the practice of Virtue the use of Trial and Discipline in forming reasonable Beings to Virtue</em>, <em>and the Essentials of a good and bad Character</em>.</span><span style="float:right;">p. 200</span>
</div>
Any help would be appreciated.
You should use p to wrap the text instead of a span element, assign some fixed width to p and float that to the left
Demo
.conts {
font-size:80%;
text-align:justify;
text-indent:-1em;
margin-left:1em;
margin-bottom:1.5em;
width: 600px;
}
.conts p {
float: left;
width: 500px;
}
.conts span {
margin-top: 10px;
}
If you want to position the number at the end of the line, use position: absolute; wrapped inside position: relative; container.
Demo 2
First. change all this code <span style="float:right;"> Page number here </span> into <p>Page number</p>. then change your CSS like this.
.entry {
width: 450px;
padding-left: 90px;
}
strong {
font-variant:small-caps;
font-weight:normal;
}
.conts {
width:100%;
}
.conts span {
float:left;
width:80%;
font-size:80%;
text-align:justify;
text-indent:-1em;
margin-left:1em;
margin-bottom:1.5em;
}
.conts p {
float:right;
width:10%;
font-size:80%;
margin-top: 0px;
}
Last, add <br clear="all"/> after <p>Page Number</p>. hope this help :)
See Demo Here
Try adding a padding-right:100px; to the contents and margin-right:-100px; to the floated page number. That should make sure the full contents are correctly made to stay a certain width while pulling your page numbers out of that space and into the right margin.
wrap all of the chapters up into one main div. Float that left, width 80% (or whatever works). then wrap your page numbers into a second div, and float that right with a width of 20% or less, depending on your margins. MAKE SURE YOU GIVE YOUR WRAPPER DIV (or whatever div you wrapped the entire code in) A WIDTH OR THE WIDTHS YOU ASSIGN TO INSIDE DIVS WILL NOT WORK.
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.
i want to center my block menu in the middle, but i also want it to lay next to each other without any huge space.
i tried to float the entire thing and set the margin left and margin right to auto. But after searching the web, i found out that is not possible to center something that is floating.
Then i tried to set the block to inline-block and take away the float element. And again settiing the margin to auto. Now this dosen't seem to work either. I read someplace that you could set the text-align to center, this is centering my text in the block, but the block itself isn't getting in the middle.
my entire menu code in css at this moment:
a.menyStil
{
display: inline-block;
width:150px;
height:25px;
margin-right:auto;
margin-left:auto;
background:#dca; border:1px solid #000;
text-align:center;
text-decoration:none; font-family:verdana, arial, sans-serif; font-size:12px; color:#000;
line-height:25px;
overflow:hidden;
}
a.menyStil:hover {background:#764;}
a.menyStil:active {background:#c00;}
and relevant html code:
<p> <a class="menyStil" href="Hjem.html"> Hjem</a>
<a class="menyStil" href="Kontakt.html"> Kontakt oss</a>
<a class="menyStil" href="om_oss.html"> om osst</a>
<a class="menyStil" href="testing.html"> Testing</a></p>
i would really appreciate help :)
Add this in your css code
p{
width: 650px;
margin: auto;
}
Demo: fiddle
you should add margin auto in p. Because its containg the a. so its come center.
I hope this may be helpful to you.
p {
text-align: center;
}
http://jsfiddle.net/B8gFC/
I'm developing a website using drupal's (7.14) Marinelli theme as a template. I'm currently fighting with getting the main menu onto the same line as the logo. The url of my page is http://quaaoutlodge.com/drupal-7.14/ - can anybody help me on how I have to set the css properties or put the html together to get this aligned properly? The icon should be on the left side of the main menu and the yallow background is just for debugging reason.
Any help would be appreciated!
Thank you!
The code in page.tpl.php currently looks like this:
<div style="background:#000; height:85px; position:fixed; top:0px; width:100%; text-align: right;padding-right:-20px; filter:alpha(opacity=60);border-bottom:1px solid #999;">
<div style="text-align: left;
top:0px;
width:70%;
padding-left:100px;
padding-right:auto;
margin-left:auto;
margin-right:auto;
background-color:#FFFF00;"><?php if($logo):print $imagelogo;endif ?>
<div id="navigation-primary" class="sitemenu">
<?php print $mainmenu; ?>
</div></div>
The easiest solution would be to set position:absolute on both divs together with a top: and margin-left: property to always fix them relatively. You could also float them both left for instance, set a width property and a margin-left on the right div.
Here, this is what you'd need to do : http://jsfiddle.net/Z4EAb/
The main problem is that the second div (the one that wraps the logo & navigation) is too small to fit the logo and navigation comfortably.
First, please give that second div an id ("header-wrapper", for instance) and take out the style attribute. Then here's the relevant CSS:
#header-wrapper { width: 1038px; margin: 0 auto; }
#logo { top: 15px; position: relative; }
#navigation-primary { float: left; margin-left: 50px; padding-top: 34px; }
Don't be afraid of using negative margins to position things around each other.
See also:
http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/
I've used Blueprint to prototype a very simple page layout...but after reading up on absolute vs. relative positioning and a number of online tutorials regarding vertical positioning, I'm not able to get things working the way I think they should.
Here's my html:
<div class="container" id="header">
<div class="span-4" id="logo">
<img src="logo.png" width="150" height="194" />
</div>
<div class="span-20 last" id="title">
<h1 class="big">TITLE</h1>
</div>
</div>
The document does include the blueprint screen.css file.
I want TITLE aligned with the bottom of the logo, which in practical terms means the bottom of #header.
This was my first try:
#header {
position: relative;
}
#title {
font-size: 36pt;
position: absolute;
bottom: 0;
}
Not unexpectedly, in retrospect, this puts TITLE flush left with the left edge of #header...but it failed to affect the vertical positioning of the title. So I got exactly the opposite of what I was looking for.
So I tried this:
#title {
position: relative;
}
#title h1 {
font-size: 36pt;
position: absolute;
bottom: 0;
}
My theory was that this would allign the h1 element with the bottom of the containing div element...but instead it made TITLE disappear, completely. I guess this means that it's rendering off the visible screen somewhere.
At this point I'm baffled. I'm hoping someone here can point me in the right direction. Thanks!
don't go changing positioning or floating of the blueprint classes. That will mess up the framework.
What you are trying to do is going to be difficult, because what you are trying to do (I assume) is align the baseline of the type with the bottom of the image. There is no easy way to determine the baseline of type via CSS. So getting them aligned is going to be entirely dependent on the particular font that loads for your user. If your image is 50px high, you could start by setting the line height of your h1 to 50px and then tweak from there. But understand that there will be variance from browser to browser, font to font.
You're probably better off making your headline part of the image then use some image replacement techniques to hide the text.
Give this a go and let me know if it is what you are trying to achieve?
HTML:
<div id="container">
<div class="logo">Logo here</div>
<h1>TITLE</h1>
</div>
CSS:
#container{
background-color:#ccc;
position:relative;
width:300px;
height:200px;
}
.logo{
width:110px;
height:40px;
background-color:#ff0000;
margin: 0 auto;
}
#container h1{
font-size:120%;
font-weight:bold;
text-align:center;
}
Here's a live demo: http://jsfiddle.net/jrLL2/