|
CSS - Center Align Block + Margin Spacing Help
For the first time, rather than coding my own layout CSS, I'm adapting a layout and CSS created by someone else... and I've run into some problems figuring out a couple of things. The layout in question is one written for Movable Type, and is freely able to be edited and changed.
I'm working with the layout in a test setting now, before moving it to its permanent home. You can see it in action at: Code: http://www.outincenterfield.com/mt/ Two things I need to figure out: 1. How to align the whole layout in the center of the page. (the header image, the 3-columns, and the footer) 2. How to increase space(margin) between the boxes in the sidebars, so that the underlying white background color shows through. Any help would be GREATLY appreciated - as the way this layout is coded has got me turned all around. I've tried everything I could think of, and can't sort out how to do these two things. Here's the main CSS: Code: /*
THEME NAME: Diurnal
THEME URI: http://ntuat.wordpress.com/
DESCRIPTION: This flexible 5-in-1 theme changes according to the time of day
VERSION: 1.0
AUTHOR: Carolyn Smith
AUTHOR URI: http://not-that-ugly.co.uk/
TEMPLATE: sandbox
*/
/* use any structure in /sandbox-layouts; more details in the readme*/
/* included here for Movable Type */
/* links to time-specific stylesheets */
@import url('sunrise/style.css');
@import url('morning/style.css');
@import url('afternoon/style.css');
@import url('sunset/style.css');
@import url('night/style.css');
div#container {
margin-left: auto;
margin-right: auto;
width: 1000px;
}
div#content {
margin: 0 400px 0 0;
}
div.sidebar {
float: left;
overflow: hidden;
width: 180px;
}
div#primary {
margin: 0 0 0 -400px;
}
div#secondary {
margin: 0 0 0 -200px;
}
div#footer {
clear: left;
width: 1000px
}
body {font: 0.75em arial, helvetica, verdana, sans-serif;
margin:0;
padding:0;
color:#444}
#container {background:#fff;}
#content {
padding:0 10px 0 10px}
/* header */
#header {height:200px;}
#header h1 {font:3em 'century gothic', futura, serif;
margin:0;
padding: 0 10px 0 10px;}
#blog-description {padding:7px 10px 0px 10px;
color:#fff}
.skip-link {display:none}
/* prev/next links */
.navigation {margin:1em;
text-align:center;
width:95%;
height:1em}
.nav-previous {float:left;
text-align:left;
width:45%}
.nav-next {float:right;
text-align:right;
width:45%}
.nav-previous a {padding-left:20px;
background:url(leftarrow.gif) center left no-repeat;}
.nav-next a {padding-right:20px;
background:url(rightarrow.gif) center right no-repeat;}
span.meta-nav {display:none}
/* page navigation */
#menu ul li {
margin:0;
padding:0;
display:inline;
font:1.2em 'century gothic', futura, sans-serif;
}
#menu ul li ul {margin:0;
display:inline;
font-size:0.8em;
}
#menu ul li a {
padding: 3px 20px 3px 10px;
letter-spacing:0.05em;
}
/* sidebar stuff */
.sidebar {margin:0;
padding: 10px;
background:#fff}
.sidebar h3, .comments h3, #respond h3 {letter-spacing:0.05em;
margin:0;
padding:7px 10px 3px 20px;
font: 1.4em 'century gothic', futura, sans-serif}
#menu ul, .sidebar ul {list-style:none;
margin:0;
padding:0;}
.widget, .sidebar li.linkcat {border:1px #ccc solid;
margin-bottom:2em;}
.sidebar ul li, #wp-calendar caption {background:#f0f0f0 url(greybk.png) top left repeat-x;
border:1px #ccc solid;}
.sidebar h3 {border:1px #ccc solid;}
.sidebar ul li ul li, .sidebar ul li div {background:#fbfbfb;
border:0;
padding:3px 10px 3px 10px;}
.sidebar ul li ul li ul li {
padding-left:20px;
background:url(rightarrow.gif) center left no-repeat;}
/* posts & comments */
.post, body.page div.hentry, .comment, .trackback, .pingback {border:1px #ccc solid;
margin:10px 0 10px 0}
.entry-title, .comment-author {letter-spacing:0.05em;
margin: 0;
background:#f0f0f0 url(greybk.png) top left repeat-x;
padding:5px 10px 0px 10px;
font: 2em 'century gothic', futura, sans-serif}
abbr.published {border:0;}
.entry-date, .comment-meta, #trackbacks-list div.comment-author {
text-transform:uppercase;
font-size:0.9em;
margin:0;
background:#f0f0f0;
padding:0px 10px 5px 10px;}
.entry-date {background:#f0f0f0 url(clock.gif) top left no-repeat;
padding-left:20px}
#trackbacks-list div.comment-author {font-family: arial, helvetica, verdana, sans-serif;
border-bottom:1px #ccc solid;
letter-spacing:0em;
padding-top:5px}
.comment-meta {border-bottom:1px #ccc solid;}
.comment p, #trackbacks-list p {padding:0px 10px 0px 10px;
background:#fbfbfb;}
.entry-content {line-height:1.4em;
padding:10px;
background:#fbfbfb;
border-top:1px #ccc solid;
}
.entry-meta{
clear:both;
background:#f0f0f0;
border-top:1px #ccc solid;
padding:5px 10px 5px 10px}
.meta-sep {padding-left:18px;
color:#f0f0f0;}
li.bypostauthor div.comment-author {background:#f0f0f0 url(starbk.png) top left repeat-x}
/* forms */
input, textarea {background:#f0f0f0 url(greybk.png) top left repeat-x;
border:1px #ccc solid;
color:#444;
font:1em arial, helvetica, verdana, sans-serif;
overflow:auto}
#commentform #submit {margin:10px 0 10px 0;
color:#333}
#searchform div{background:#f0f0f0;
margin:10px}
#searchform submit {color:#333}
/* calendar */
#calendar h3 {display:none}
div#calendar_wrap {padding:0;
background:#f0f0f0 url(greybk.png) top left repeat-x;}
#wp-calendar {width:100%;
background:#fbfbfb;}
#wp-calendar caption {font:1.4em 'century gothic', futura, sans-serif;
margin:0;
padding: 5px 0px 5px 20px;
text-align:left
}
#wp-calendar td {text-align:center;
border:#ccc 1px solid;
background:#f0f0f0 url(greybk.png) repeat-x;}
#wp-calendar tfoot td {
background:#fbfbfb;
border:0;
}
#wp-calendar td.pad {border:0;
background:#fbfbfb}
td#today {
background:#ccc;
border:#999 1px solid}
/* image handling */
#content img {max-width:98%;}
#content, .sidebar {overflow:hidden}
a img {border:0}
.alignright {
float:right;
margin:5px}
.alignleft {
float:left;
margin:5px}
.center {
margin:auto;
display:block;
}
/* getting asides to LOOK like asides */
body.home div.category-asides {
margin:20px 0px 20px 0px;
padding:5px 10px 5px 10px}
body.home div.category-asides *{
display:inline;
}
body.home div.category-asides .entry-content {border:0;
font-size:1em;
line-height:1.5em;
padding:0}
body.home div.category-asides div.entry-meta {background:#fbfbfb;
margin:0;
border:0
}
body.home div.category-asides .entry-title,
body.home div.category-asides .entry-date,
body.home div.category-asides .author,
body.home div.category-asides .meta-sep,
body.home div.category-asides .cat-links
{display:none}
/* html elements */
a {text-decoration:none}
blockquote {border:1px #ccc solid;
padding:5px}
h2 {font: 2em 'century gothic', futura, sans-serif;
margin:10px 0 -10px 0;
}
.hentry ul {list-style-image:url(rightarrow.gif)}
#footer {
background:#f0f0f0 url(greybk.png) repeat-x;
text-align:center;
border-top:#ccc 1px solid;
padding:10px 0 10px 0;
}
Similar TutorialsWorking on a project that has listing of physical features of frogs. In one listing, the text in the descriptions are in a block for which the last line extends to the right margin. Here is a sample of what the text looks like: Code: 1. A weak tarsal fold; outer fingers one-third webbed; males having spiny nuptial tuberosities; color in life tan or brown with blotches or reticulations, never green; iris bronze color . . . P. euthysanota group--2 No tarsal fold; outer fingers having only vestige of web; males lacking nuptial tuberosities; color in life green or brown; iris red or golden color . . . . . . . . . . . . . . . . . . . . . . P. schmidtorum group--5 My question is how to write the CSS to get only the LAST line of a block of 'justified' text to extend to the right edge. Also, if the user resizes the page, I don't want the right-aligned text to write on top of the left-aligned text. One of the biggest constraints is that it HAS to be done with CSS and not through javascript. Thanks. I am working on a site right now. I have two adjacent divs, one on top of the other. Both are styled with margins and padding set to "0." I want the second div to be directly below the first with no spacing. If I include a single-pixel border on the second div, the elements touch with the border being the only thing between the first and second div. Without the border, there is a space of what I believe to be 20 pixels. I don't want to actually use the border so I'm not sure what to do. I don't understand why the page is behaving this way. Feel free to check it out at kellyshipe.com. I would have linked but forum rules evidently prevent it. I'm working on the site www rabidpursesquirrels com and any time someone resizes their browser to something smaller than full screen (or simply has a small screen display) the middle block drops to the bottom of the screen. I need to find out how to make that stop happening. I don't mind if the site is too wide then and they have to scroll left to right, this would at least fix my first problem. My 2nd problem is the margins between the center block and the sides blocks. I can't figure out where I can adjust those. As you can see currently the left seems to look ok but the right side is all screwed up. I've been through the style sheet for 4 days and can't seem to find what to adjust. I'm new to css and can 'tweek' it ok but writing it is totally out of my league. Thanks in advance, QV Hi, I have a margin or spacing between the header image and the navigation bar. I'm unsure of how to remove it. I want the navigation to be directly underneath the header. This is the HTML Code: <div id="navbar"> <ul> <li><a href="index.html">Home</a></li> <li><a href="horses.html">Horses</a> <ul> <li><a href="stallions.html">Stallions</a></li> <li><a href="mares.html">Mares</a></li> <li><a href="geldings.html">Geldings</a></li> <li><a href="foals.html">Foals</a></li> </ul> </li> <li><a href="showteam.html">Show Team</a></li> <li><a href="showresults.html">Show Results</a></li> <li><a href="youths.html">Youths</a></li> <li><a href="sales.html">Sales</a></li> <li><a href="contactus.html">Contact Us</a></li> </ul> </div> This is the CSS Code:
#header {
background:#ddd;
border-left:1px solid #FFF;
border-right:1px solid #FFF;
border-top:1px solid #FFF;
}
#navbar {
font-family: Edwardian Script ITC, Verdana, Arial, sans-serif;
font-size:36px;
width:100%;
margin-top:0px;
padding:0px;
height:63px;
background-color:#FFF;
}
#navbar li {
list-style: none;
float: left;
}
#navbar li a {
display: block;
padding: 7px 8px;
background-color: white;
color: black;
text-decoration: none;
}
#navbar li ul {
display: none;
width: 5em; /* Width to help Opera out */
background-color: white;
}
#navbar li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li {
float: none; }
#navbar li:hover li a {
background-color: white;
border-bottom: 1px solid #000;
color: #000; }
#navbar li li a:hover {
background-color:#FFC; }
Any help would be appreciated! It's really frustrating me. I've tried looking around other websites for help too. Kim Greetings, I've set an anchor tag to display:block and have set the height to 80px. Unfortunately, it seems I am unable to move the text associated within the hyperlink to the middle (vertically) of the block. Any ideas on how this can be done? On my new design: http://codymays.net/~private_ftp/theed The header and footer of the green block have a space on them and I cannot figure out why. I had this problem with the design before, but I started over and now I only have this issue with IE6 and below. It works in all other browsers. I can clear the spaces if I set the margin-top of the block's content area to -4 and the footer's margin-top to -4. But once this is done, IE then redraws the div at the bottom of the page for no apparent reason. Any ideas/suggestions on what to do here would be appreciated. Thanks, Cody hello i have a div acting as a container for a layout and i'm using the following to center it on the browser window, having a background image and two borders: Code:
#master { position: relative; top: 0;
width: 46em;
margin: 0 auto;
background-image: url(../img/bg/.gif);
border-right: 1px solid #FA933C;
border-left: 1px solid #FA933C;
}
this works great on internet explorer, however, on other browsers it doesn't do so well; on netscape it centers the layer but it doesn't display the background/borders. on firefox it does the same thing. on opera it centers and displays the background, but it leaves a gap between the top margin and the top of the layer, even though the document margins are set to zero. is there a way to fix this? i suppose i could use position: absolute and then figure out a percentage away from the left margin... but this way is a lot better since the browser figures everything out neatly. hope someone can help out. thx in advance! Hi! Is it possible to align vertically block elements in a fixed-height (unknown) container? If not, this is a serious shortcoming of the css model of placing objects on the screen. Thanks! My new site can be found at http://www.rockapedia.co.uk/index2.php It works exactly how I want it in Firefox but IE doesn't appear to centre the whole page. Can someone advise please. hello i have this style in a css file.... .subheadinginvgreen { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; color: #006666; font-weight: bold; sline-height: .2em; align:center; } somehow when i apply it to a div tag, it does not center the text...e.g. <div class="">test text</div> How? I want to be able to do it from my stylesheet. Thanks guys. Hi all, I have a layout where I have a banner at the top and I want the column below it to align in the center of the page, like this ... How can I do this? Also, can someone tell me how to make the top banner column fill the whole width of the page? Thanks. I've tried the usual trick of setting the width and margin-left and right to auto but it just doesnt work. If someone could please help with this, that would be great. This is all the code in my css file as of now, i'm using an img tag as my bacground incase people were wondering, so that it would resize to fit the window. the #content block is the one that i'm referring to. css Code: Original - css Code body { font-family: Verdana, Tahoma, Arial; color: #FFFFFF; text-align: center; margin-left: auto; margin-right: auto; } .bg { width: 100%; position: absolute; top: 0; left: 0; z-index: 5000; } #content { width: 800px; height: 600px; top: 0px; left: 0px; position: absolute; z-index: 6000; border: 1px solid #FFFFFF; margin-left: auto; margin-right: auto; } .nav { background-image: url('images/blank.jpg'); background-repeat: no-repeat; } a:link { text-decoration: none; color: #0066CC; font-size: 9px; } a:hover { text-decoration: underline; color: #0066CC; font-size: 9px; } a:visited { text-decoration: none; color: #0066CC; font-size: 9px; } a:active { text-decoration: none; color: #0066CC; font-size: 9px; }
body {
my entire page's body is contained in a div. the width of this thing doesnt change. i want to keep the page on the center of the browser widow. i tried <div align=center>...... but this aligns the contents of the div and not the div itself. please help Hi again. okay i'm playing with CSS to make a new site. Im trying to get the background image to move down from the top of the page by around 3cm or 200px approx but i cant figure out how to do it. Can anyone help a CSS n00b. Thanks Image so you can see what i meean. http://img100.imageshack.us/img100/4571/help2wq.jpg Hi. I've the following and I couldn't have the right div to vertically align when the left div have multiple lines. I tried vertical-align:middle on the right div and doesn't work. And this is driving me crazy. I hope anyone can help me. Thank you. <div style="width:800px"> <div style="width:730px;border:solid 1px red;float:left;"> LOTS OF CONTENT... MORE THAN 1 LINES </div> <div style="width:50px;float:right;border:solid 1px red;"> CLOSE LINK SHOULD BE HERE LATER </div> <div style="clear:both;"></div> </div> i've heard talk of text-align wrapper hacks, or just plain using tables... i got my main container div to align center by setting it to "margin:auto" but that code doesnt work for the divs inside that div.... can you please help me out... cuz i dont even know what the text-align hack is... i just have heard of it/ I am trying to get a row of mixed divs to align horizontally center on the page. I would also like to move the Google Checkout logo up a bit so it is vertically centered relative to the logos on that row. Can you help me do these things? TIA! I've tried doing a lot of things including profanity but no go. The screenshot below is how the page looks now with this css: Code: .row div { height:75px; float:left; } #AuthorizeNetSeal,#googleCheckoutLogo,#paypal { margin-top:25px; }
Code: <div class="row"> <!-- (c) 2005, 2011. Authorize.Net is a registered trademark of CyberSource Corporation --> <div class="AuthorizeNetSeal"> <script type="text/javascript" language="javascript">var ANS_customer_id="xxxxxxxx";</script> <script type="text/javascript" language="javascript" src="//verify.authorize.net/anetseal/seal.js" ></script> <a href="http://www.authorize.net/" id="AuthorizeNetText" target="_blank">Online Payment Service</a> </div> <img src="http://www.hotscripts.com/forums/images-manual/small_cc_icon_discover.gif" > <div><!-- Begin Official PayPal Seal --><a href="https://www.paypal.com/us/verified/pal=xxxxxxxxxxx" target="_blank"><img src="https://www.paypal.com/en_US/i/icon/verification_seal.gif" border="0"></A><!-- End Official PayPal Seal --></div> <div id="googleCheckoutLogo"></div><script src='https://checkout.google.com/buttons/logos?merchant_id=xxxxxxxxxxxx&loc=en_US&f=png' ></script> <span id="siteseal"><script type="text/javascript" src="https://seal.godaddy.com/getSeal?sealID=xxxxxxxx"></script></span> <img src="http://www.hotscripts.com/forums/images-manual/100satisguar80x79.gif"> </div> Here's what it looks like now: I have used an image file "picture.PNG" like this : <h1><img src="picture.PNG" /></h1> then the css is h1{ text-align: center; margin: 20px; padding: 10px; height: 100px; } But it will not align the image in the center ? Am i going about this the wrong way ? or is it just a syntax error ? Ok, you can do this with a table by setting its height and width to 100% and then valigning to middle and centering. However is there a way to do it using CSS? |
|||||||