|
CSS - Single Colum Text Layout - Indents/margins?
I want to make a schedule using a single column (unless that really doesn't make sense). There is an image for the date on the left and then i want all of the days events in chronological order on the right of the image. How do I make the text always indented correctly?
I know thats confusing. I want it to look like this: http://www.kdpatton.com/cosmopolis/program.htm well the first entries at least. Similar TutorialsGod, I am being thick here.... How do I remove the margins on this css example: http://glish.com/css/7.asp I want the layout to sit flush to the top/left borders. For some reason everything I have tried just breaks the layout. I figured out how to put the text on top of my background Div tag image from a previous post, but this has now shown me another problem. I now need the text to be on top of the white shape only, and not spill onto the gray area. If I remember correctly (I don't have the .ai file any more) the white area is about 500px in width. But whenever I adjust the margins to reflect this, the right side just will not comply. I'll post the two div classes' code below and maybe someone can lend me a hand. Code:
#mainContent {
background-color:transparent;
background-image:url((URL address blocked: See forum rules));
background-repeat:no-repeat;
background-attachment:scroll;
background-position:0% 0%;
height:610px;
margin: 10px;
margin-right: 1cm;
overflow:auto;
padding-top: 1cm;
padding-left: .6cm;
width:550px;
}
#mainContentWrapper {
float:left;
margin-right:11px;
min-height:100%;
width:550px;
}
[note: I created a new thread as my example has shifted a bit ... it was 'white-space and checkboxes'] The site http://www.thedancegypsy.com/test/checkBoxes.shtml contains two rows of checkboxes that are *supposed* to (a) indent any wrapped lines, and (b) keep each label with the corresponding checkbox when it does so. The only difference(s) in the *sources* for the two rows a - in the first, the html for each checkBox is written on a separate line, but in the second they are separated by only a space. - box ids were different to allow for html validity check. Each paragraph has the form: <p style = "margin-left: 2in; text-indent: -1in;">...(labels) .. </p> Each label/checkbox has the form: <label for="boxA2"><input type="checkbox" id="boxA2" > Combo A</label> Alas, on my IE brower (5.2 for mac on mac os 10.3), when changing screen sizes * the first row manages to keep each label with the corresponding checkbox -- but fails to indent. * the second row indents (reasonably well) but totally fails to keep the checkboxes with the labels. Any ideas???? Notes: This test started with an attempt to get a similar line of checkboxes to render correctly on a windows IE environment...] All lines are now handwritten, rather than the javascript coded lines I had in my earlier example... separation is now via non-breaking space rather than nowrap spans. If duplicate ids are allowed, the result is the same In Internet Explorer 6, the following HTML and CSS with negative margins causes the first letter of the heading to disappear: Code: <html>
<head>
<style type="text/css" media=screen>
#siteBody {
position: absolute;
top: 100px;
left: 100px;
width: 700px;
margin-left: 2em;
}
h1 {
margin-left: -1em;
}
</style>
</head>
<body>
<div id="siteBody">
<h1>This is the heading</h1>
<p>
This is the content.
</p>
</div>
</body>
</html>
There are ways to get the negative margin to work in IE properly, but at a loss of functionality. For instance, if I remove the width property from the siteBody CSS, and change the position to 'relative', the letter will appear. Also, if I remove the div and just place the 'siteBody' id on the body tag, then the first letter will appear. Any help is greatly appreciated as I've been searching for a solution for a couple of days now. Thanks, ---atomgiant Hi Guys, Having a problem on IE7, whereby a UL is still indenting itself, even when the padding and margin are set to zero. Anyone got any suggestions please? Charlie PHP Code: .nav{list-style: none; } .nav ul { padding: 0; margin:0; list-style: none; width:10em; z-index:99; position:relative; overflow:visible; left: 0px; } .nav li { margin:0; position: relative; float:left; width: 12em; text-align: center; color: #FFFFFF; background-color: #006699; border:solid 1px #black; display:block; height:auto; left: 0px; } Does anybody know what the css attributes would look like for the right margin divs like (e.g. #smr-00) found in this tutorial? (see link) css.image.text.wrap.tutorial.htm I've got a real head-scratcher that I cannot find a solution for. The webpage I am talking about is he http://test.ecofreshusa.com/Company.aspx If you see the "breadcrumb-like" submenu (the grey one) in IE, zooming at 100% looks fine, but when you hit Ctrl+ or Ctrl- to text zoom, the margins between every line item (its made using an unordered list).. fall out and the text loses all spacing. Does anyone know where I went wrong? Any help would be much appreciated.. Oh and heres the CSS im using to work with this menu. Code: <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
#breadcrumb {
position: relative;
left:0px;
top:0px;
width:860px;
vertical-align: middle;
height: auto !important;
background: #F0f0f0;
margin-top: 0px;
display: inline;
}
#breadcrumb_left {
position:absolute;
left:0px;
top:0px;
width:660px;
height:20px;
background-color: #f0f0f0;
border-bottom: 1px solid #cccccc;
border-top: 1px solid #f0f0f0;
z-index: 10;
}
#breadcrumb_right {
position:absolute;
float: right;
left:660px;
top:0px;
width:200px;
height:20px;
background-color: #F0F0F0;
border-bottom: 1px solid #cccccc;
border-top: 1px solid #f0f0f0;
z-index: 10;
}
div.crumbs { margin: 0px 0px 0px 20px; float: left; font-family: Helvetica, Arial, San-serif; font-size: 10px; color: #999999;
}
b.crumb_title { font-family: Helvetica, Arial, San-serif; font-size: 10px; color: #999999;}
.crumbs span {
display: block;
}
.crumbs ul {
display: inline;
margin: 0 !important;
padding: 0 !important;
}
.crumbs ul li {
background: none;
display: inline !important;
margin: 0;
margin-left: 20px;
font-family: Helvetica, Arial, San-serif; font-size: 10px; color: #999999;
line-height: 20px;
}
.crumbs a:link { color: #0078C2; text-decoration: none; }
.crumbs a:visited { color: #0078C2; text-decoration: none; }
.crumbs a:hover { color: #629D34; text-decoration:underline; }
.crumbs a:active { color: #629D34; text-decoration:underline; }
.crumbs img {
float: none;
width: 8px;
height: 5px;
border: 0;
margin: 7px 0px 0px 20px;
padding: 0;
}
-->
</style>
Hi! Could some experienced CSS developer please confirm this: All paddings, and right and left margins, always combine (what I mean is if you have a left object with a 5px right margin and a right object with a 5px left margin, the distance between the two will be 10px). However, bottom & top margins never combine. Is all this true? I am having a problem where I have a <div> that holds my body image, margin: 0 auto; Inside that is my content <div> with margin:15px; but this is visually dropping the background image's margin by 15px. The problem compounds every time I add another margin/padding requirement into the rest of the <div>. Code: html, body {
margin:0px;
padding:0px;
background-image:url(images/interface/background.png);
}
#body_image {
width:935;
margin:0 auto;
padding:0px;
background-image:url(images/interface/body.png);
background-repeat:no-repeat;
background-position:center;
}
#container {
width:904px;
height:750px;
margin:15px;
}
#slug {
height:15px;
}
Code: <div id="body_image"> <div id="container"> <div id="header">Header</div> <div id="nav">Nav</div> <div id="sidebar">Sidebar</div> <div id="content">Content</div> <div id="footer">Footer</div> </div> </div> The extent of my CSS is a few tutorials online and the class I took 10 years ago where the teacher said "Here's CSS, you can't do much more than change your font size and color with it... on to tables!" Thought it'd only be fair to give you a little background. Hi, I just can't seem to get my head around this one. I have a website title which appears on every page. The whole title is a link to the index page of the website. I want the second part of the title to be a h1 header with smaller font in a different colour. I also want the whole title to be on one line. I can only seem to get either all the words in the same font, or I can get the two parts to display their different fonts correctly, but they then appear on two lines, one under the other! My page code: <div id="garden-designer-title"><a href="(*website address*)" title="home">Joe Blogs</a><h1 style="display: inline'"><a href="(*website address*)" title="home">Garden Design</a></h1> </div> My stylesheet code: #garden-designer-title { position:relative; left:0px; top:0px; padding: 0; margin: 0; width:526px; height:51px; z-index:7; } #garden-designer-title a { position:relative; font-size: 46px; font-family: verdana, arial, helvetica, sans-serif; color: #009999; font-weight: normal; text-decoration: none; } #garden-designer-title h1 a { display: inline; font-size: 29px; font-family: verdana, arial, helvetica, sans-serif; color: #9482A4; font-weight: normal; text-decoration: none; } Does anyone know what I'm doing wrong?! Many thanks! Hi All, This seems to be a bit of a recurring problem for me in a lot of the new CSS designs I'm trying... but it seems that IE interprets both padding and margins differently than how firefox interprets them. Sometimes it seems to do it the same, and other times differently. Take a look at this: http://zeroonedesign.com/beta/newsite/index.html CSS he http://zeroonedesign.com/beta/newsite/style.css Now look at it first in Firefox (the desired effect) and then in IE. IE seems to be incapable of understanding this particular piece of the code Code:
#menu {padding-top:140px;text-align:left;padding-left:38px;}
#menu ul{margin:0px;}
#menu ul li{display:inline;margin-right:10px;padding:5px 7px 5px 7px;color:#fff;}
#menu ul li a{color:#fff;font-size:10pt;text-decoration:none;}
#menu ul li a:hover{color:#fff;font-size:10pt;border-bottom:3px solid #fff;}
#menu ul li a.selected{color:#f88000;font-size:10pt;border-bottom:2px solid #f88000;}
Ideas? Help? I know the box model is different for IE than it is for FF but I've tried the box model hack and it doesn't seem to do anything. I'm trying to create a layout (internal to a page - in the content area) that looks like this image image image image text text text text without using tables. This works great using floats but I want the entire block of images/ text centered in the container. Currently this is just left justified which looks really bad my code Code: <div align="center"> To view the site plan, please click the image below. </div> <br> <div align="center"> <div class="lfloat"> <a href="#self#?fuseaction=ecbs.showsiteplan&selshow=#attributes.selshow#&sp=1"> <img src="siteplan/images/ecbs_01.gif" alt="Pier 66"></a><br> Bahia Mar </div> <div class="lfloat"> <a href="#self#?fuseaction=ecbs.showsiteplan&selshow=#attributes.selshow#&sp=2"> <img src="siteplan/images/ecbs_01.gif"></a><br> Pier 66 </div> <div class="lfloat"> <a href="#self#?fuseaction=ecbs.showsiteplan&selshow=#attributes.selshow#&sp=3"> <img src="siteplan/images/ecbs_01.gif"></a><br> Convention Center </div> <div class="lfloat"> <a href="#self#?fuseaction=ecbs.showsiteplan&selshow=#attributes.selshow#&sp=4"> <img src="siteplan/images/ecbs_01.gif"></a><br> Sailfish Pavilion </div> </div> lfloat just specifies float:left Hello, I'm new to css layouts. I had to float:left every element so the heights stretch problem is if the image in "page_c_left" is wider than 45% then "page_c_right" will automatically go on the next line. (in Firefox, IE seems to wrap the text without moving the element). also, i wanted to have the content displayed first for non-css browsers, but the examples used position:absolute. when the impression i got was that float is preferable to position. i'm very confused on which method to use for layouts. what method would you use for complex css layouts? float, position or other? this is code with the text wrap problem Code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>test</title>
<style type="text/css">
#main_c {
float:left;
width:770px;
padding: 10px;
border: 1px solid black
}
#header_c {
float:left;
border:1px solid brown
}
#page_c {
float:left;
width:100%;
border:1px solid red
}
#page_c_left {
float:left;
padding:10px;
border:1px solid blue
}
#page_c_right {
float:left;
width:55%;
padding:10px;
border:1px solid green
}
#footer_c {
float:left;
border:1px solid yellow
}
</style>
</head>
<body>
<div id="main_c">
<div id="header_c">
THIS IS THE HEADER
</div>
<div id="page_c">
<div id="page_c_left"><img src="../../photos/image.jpg" alt="image" /></div>
<div id="page_c_right">RIGHT SIDE paragraph RIGHT SIDE paragraph as ohajst aisdncn uajajs
ajshd hfhgg<br />lakshh toyt a bTr asnf f Uahdlalsl jahjsu aujsjdhduwhtn ausud aushd aiua akshdusjj<br />
ka u annf au ffsdjkfjs didjs dd sjskjdk<br /> SIDE paragraph RIGHT SIDE paragraph as ohajst aisdncn uajajs
ajshd hfhgg<br />lakshh toyt a bTr asnf f Uahdlalsl jahjsu aujsjdhduwhtn ausud aushd aiua akshdusjj<br />
ka u annf au ffsdjkfjs didjs dd sjskjdk<br />RIGHT SIDE paragraph RIGHT SIDE paragraph as ohajst aisdncn uajajs
ajshd hfhgg<br />lakshh toyt a bTr asnf f Uahdlalsl jahjsu aujsjdhduwhtn ausud aushd aiua akshdusjj<br />
ka u annf au ffsdjkfjs didjs dd sjskjdk<br /> SIDE paragraph RIGHT SIDE paragraph as ohajst aisdncn uajajs
ajshd hfhgg<br />lakshh toyt a bTr asnf f Uahdlalsl jahjsu aujsjdhduwhtn ausud aushd aiua akshdusjj<br />
ka u annf au ffsdjkfjs didjs dd sjskjdk<br /></div>
</div>
<div id="footer_c">
THIS IS THE FOOTER
</div>
</div>
</body>
</html>
if you could help, thank you according to the css 2.1 spec if you specify the margin/padding of an element in ems then it takes the measurement from that element's font size, this means that * { font size: 1em; } h1 { font-size: 1.5em; margin-bottom: 1em; } gives h1 a margin of ... 1.5em ... which sucks. and is counter intuitive IMO. how is one supposed to go about having fixed margin spaces when using scalable fonts? now i know that margins overlap so theoretically setting p { margin-top: 1em; } instead would work, but only where a p lies under a h1. if i had a h1 then a h2 then a p then how large would the gap be between the h1 and the h2? and how would i control that reliably? the only way around this i can think of is this * { font-size: 1em; /*let's say this equates to 10px on the device it's being viewed on*/ } h1 { font-size: 1.5em; /*...then this would be 15px*/ margin-bottom 0.67em; /*..this would be 67% of 15px = 10px!*/ } h2 { font-size: 1.2em; /*12px*/ margin-bottom: 0.83em; /*83% of 12px = ... 10px!*/ } p { margin-botton: 1em; } Now, when i scale the font size all the margins should scale in accordance with the <p>. at least, according to my understanding of the spec. i'll try it in the next couple of hours (first thing monday morning just got to work)... anyone else thought of a scalable friendly alternative? Hello, I am using an OS Commerce layout for a client's website. On this page - www.mts-diesel.com you will see how I have the homepage laid out in anticipation of design, with 3 divs of varying colors. One div with an id of #hp_left is where I want to put a nice jquery code. But when I insert that into #hp_left it breaks the whole layout, was seen here www.mts-diesel.com/index2.php I'm not sure what in the css in the code for this script is breaking my layout but Ithought someone here might be willing to shed some light. A big thank you. Tom Hey, I am currently learning how to do layouts in pure CSS and am running into a few problems. Some of these i've cleared up, but i'm still learning obviously. My currently issue is that margin / top settings are not consistent throughout browsers. Example: in FF/Mozilla a margin setting or "top" pixel setting is "lower" than in IE. The reason for this is, apparantly, when margins are set to zero my lower div table actually rides up "under" the above div's bottom border, this creates an offset of 5 pixels when setting margins, etc. Whereas, in IE, the div sits directly beneath the 5px border, as I would assume it should. Here are the files i'm using: 1) Webpage: http://www.binjured.com/index2.php 2) CSS File: http://www.binjured.com/style2.css important css (as i see it) a #nav, .top, .main (these are all near the bottom of the file, if you wish to skip extraneous code). I am trying to understand WHY css does the things it does and how I can make it do the right thing. Any help would be extremely appreciated. Finally, there may be some extraneous code that those who know css, know does nothing. It's in there because I am trying to "debug" it but i'm completely lost for the answer now . Hello, I have been having some problems with ie and auto margins, In firefox my page shows perfectly, but in ie, the page hangs to the left only showing the default margin that ie gives you. I want the page to center in the middle. The link to the page is spanglerdesign.com/test/Mulligan1 i have a left margin of 5px on the navigation links that pushes them away from the edge. however. However, for Corporate Leadership and board of directors, the second line does not indent. How can I fix this? http://zettalogica . com/fulcrum/index.html Also, if anyone has an opinion, do you think it would be better to keep the text for that line the same size as the other links, or would you make the text smaller so that the bar itself is the same height as all the others in the navigation. Thank you Hey there. A friend of mine was giving me a hand with the coding for http://myspace.com/457343540 but unfortunately I can't get in contact with him atm, so I thought I'd as here. As you can see in the link provided, firefox display the margins I want, but IE throws them off a bit. I've tried a few different things, but after a couple hours I've given up trying on my own lol. Another issue is the page is obviously stretching off the page (?idk) as the scroll bar goes off the side. Code: <style>
{ Music Player Properties }
.i {display:none;}
table table td.text div object {position:absolute; top:1140px; left:50%; margin-left:-30px;}
table table td.text div object object {position:static; margin-left:0px;}
{ Background Properties }
table, tr, td { background-color:transparent; border:none; border-width:0;}
body {
background-color:000000; background-attachment:scroll; background-position:top center; background-repeat:no-repeat; background-image: url(http://bnesfinest.net/tomm/myspace/tioc/bg.jpg);
border-top-width:0px; border-bottom-width:0px; border-left-width:0px; border-right-width:0px; border-color:none; border-style:solid; padding-left:0px; padding-right:0px;}
.samohtlogo{
position:absolute; width: 100px; top: 20px; left: 20px; text-align: left; z-index: 10;}
.menu{
width: 959px; height: 136px; position: absolute; top: 591px; z-index: 2; overflow: visible; margin-left: -480px; left: 50%;}
.header {
width: 959px; height: 422px; position: absolute; top: 169px; margin-left: -480px; z-index: 0; overflow: visible; left: 50%;}
.memberstop {
width: 959px; height: 403px; position: absolute; top: 727px; margin-left: -480px; z-index: 0; overflow: visible; left: 50%;}
.thealbum{
width: 422px; height: auto; position: absolute; top: 1130px; z-index: 2; overflow: visible; margin-left: -480px; left: 50%;}
.musicbg{
width: 541px; height: auto; position: absolute; top: 1130px; z-index: 0; overflow: visible; margin-left: -62px; left: 50%;}
.shows{
width: 959px; height: auto; position: absolute; top: 1513px; z-index: 0; overflow: visible; margin-left: -480px; left: 50%;}
.reverbshows{
width: 959px; height: auto; position: absolute; top: 1550px; z-index: 2; overflow: visible; margin-left: -445px; left: 50%;}
.featvideo{
width: 959px; height: auto; position: absolute; top: 1535px; z-index: 2; overflow: visible; margin-left: -50px; left: 50%;}
.R { Div Counter Acts }
.friendSpace div { overflow:visible !important; height:auto !important; position:static !important; background:none !important; }
.friendsComments div { overflow:visible !important; height:auto !important; position:static !important; width:auto !important; background:none !important; }
html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td table tr td{
background-color: !important; text-align: left; vertical-align: top; overflow: visible !important; font-size: 11px !important; line-height: 12px !important;
text-transform: none !important; text-align: justify; letter-spacing: 0px; color: e7e2c5!important; margin: 10px !important; padding: 20px 20px 12px 0px;
border-bottom: 1px dotted dimgrey !important; border-color: 50433d!important; _line-height: 16px !important; }
html body.bodyContent table tbody tr td table tbody tr td.text table.friendSpace tbody tr td.text table tbody tr td table tr td table tr td a{
width: 110px !important; overflow: hidden; letter-spacing: 0px; font-size: 10px !important; line-height: 12px; display: block; color:50433d!important;
margin: 0 !important; padding: 0 !important; text-align: center !important; margin-left: 1px !important;}
.friendSpace {
position: absolute !important; z-index: 4 !important; width: 800px !important; margin-left: -320px; _margin-left: -400px; top: 0px !important; margin-top: 1860px !important;
}
.friendsComments {
position: absolute !important; z-index: 6 !important; margin-left: -35px; _ margin-left: -400px; width: 833px !important; top: 0px !important; margin-top: 2755px !important;
}
.friendsComments a img {border: 3px; border-color: 50433d; border-style: solid;}
.friendsComments table {width: 800px; align: justify; position:relative; left:0px; }
.friendSpace a img {border: 4px; border-color: 50433d; border-style: solid;}
</style>
|
|||||||