|
CSS - Creating Css Module Boxes
Hi. im used to using tables for things like this, trying to get it all into css, im having a little trouble creating like module boxes,
with tables i would slice the corners up, etc and put arrange them in a table, Row 1: 3 columns //header Row 2: 1 column spanning 3 //content Row 2: 3 columns //footer corners heres a diagram of what im trying to do will make it easier to understand, appreciate anyones help. Cheers Rob Similar TutorialsI'm attempting to get a background image to stay in the position I've defined in the 'bannerAd" css. The problem I'm having is that when I change the position (margins or padding) of the objects in the css class code for the bannerAd-top-right, the background image in the bannerAd div is effected. How can I move the content in the bannerAd-top-right css without the content in the bannerAd div getting affected? Below is the code for the index.php showing the class definitions: Code: <div id="bannerAd">
<div class="bannerAd-top-left">
<jdoc:include type="modules" name="user5" style="bannerAd-top-left" />
</div>
<div class="bannerAd-top-right">
<jdoc:include type="modules" name="rightBanner" style="bannerAd-top-right" />
</div>
</div>
Below is my css for the above: Code: #bannerAd {
background:url(../images/banner-right.jpg) no-repeat right 0;
margin-bottom: 10px;
width: 100%;
}
.bannerAd-top-left {
margin-bottom: 10px;
height: 230px;
width: 400px;
float:left;
}
.bannerAd-top-right {
height: 60px;
width: 400px;
padding:178px 0px 0px 445px;
}
I need the .bannerAd-top-right which contains my banner to be moved in position independently from the background image found in the bannerAd css. I just need to move the position of the .bannerAd-top-right up about 10px but every time I do that it shrinks the background image. Any help would be greatly appreciated. thanks. I have my "global" a:link color set to WHITE, but the WEATHER.COM module's background color that I want to use is also white, so the links are not visible. How do I change the color of JUST the WEATHER.COM module, given the code that I'm using below? Any help is HUGELY appreciated! /*-- global settings --*/ a { color: #FFFFFF; text-decoration: none;} a:hover { text-decoration: none; color: #FF5134; /*-- module settings --*/ #ads { float: right; width: 160px; padding: 0 0 0 20px; .ads a {color: #1200FF;} .ads a:hover {color: #1200FF;} } /*-- Weather --*/ #weather { .weather a:link {color: #1200FF;} .weather a:hover {color: #1200FF;} } Hi guys, I am trying to achieve the following: Box 1 | ------ Box 2 | ** With a 3rd box to the right of box 1&2 I have got this far but cant work out how to do 'box2' Code: <div id="box2"> box 2 </div> <div id="box3"> box 3 </div> Code:
#box2 {
float: left;
padding: 10px;
margin: 20px;
background: #ffffff;
width: 100px;
/* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 100px;
}
html>body #box2 {
width: 100px;
/* ie5win fudge ends */
}
#box3 {
float: right;
padding: 10px;
margin: 20px;
background: #ffffff;
width: 100px;
/* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 100px;
}
html>body #box3 {
width: 100px;
/* ie5win fudge ends */
}
Can anyone possibly help? Im trying to replicate the vertical navigation style that is used on the Mozilla Firefox Website (as seen to the left). I have sucessfully done this useing images, with the exclusion of a space problem between the items and the end images in FireFox. I am using the strict.dtd and am frustrated with this problem. Iff anyone can help me create a nav with this style that would be wonderful. Here is the css im using: Code:
.cssnavend {
position:relative;
font-family: arial, verdana, helvetica, sans-serif;
display: block;
width: 209px;
height: 9px;
margin: 0;
margin-bottom:0px;
padding: 0;
}
.cssnav {
position:relative;
font-family: arial, verdana, helvetica, sans-serif;
background-image: url(images/but-over.jpg);
background-repeat: no-repeat;
display: block;
width: 209px;
height: 31px;
margin: 0;
margin-bottom:0px;
padding: 0;
}
.cssnav a {
display:block;
font-size: 11px;
width: 209px;
height: 31px;
display: block;
float: left;
margin: 0;
padding: 0;
color: #096CCE;
text-decoration: none;
}
.cssnav img {
width: 100%;
height: 100%;
border: 0;
}
.cssnav a:hover{
color: #000;
}
* html a:hover {
visibility:visible
}
.cssnav a:hover img{
visibility:hidden
}
.cssnav span {
position:absolute;
left:7px;
top:7px;
margin:0;
cursor: pointer;
}
#box {
margin-top: 10px;
padding: 0;
width: 209px;
display: block;
}
#boxtop {
width: 209px;
height: 11px;
}
#boxcontent {
width: 209px;
background: #DFE5EB;
}
#boxbottom {
width: 209px;
height: 11px;
}
#boxtext {
width: 209px;
background: #DFE5EB;
padding: 2px;
}
The following code is me testing my css. The first group is useing the cssnav styles. The 2nd group is using the box styles. The 3rd group is a try at making a content box with rounded corners that is a spacific width. Unfortunatly, the content of the box will not wrap to the width of the box, instead it continues on 1 line and outside the box. Code: <div class="cssnavend"><img src="images/but-top.jpg"></div> <div class="cssnav"><a href="index.php"><img src="images/but-up.jpg" /><span>Home</span></a></div> <div class="cssnav"><a href="#"><img src="images/but-up.jpg" /><span>This is a test</span></a></div> <div class="cssnav"><a href="phpbb/index.php" target=_blank><img src="images/but-up.jpg" /><span>Forum</span></a></div> <div class="cssnavend"><img src="images/but-bot.jpg"></div> <br><br> <div class="box"> <div class="boxtop"><img src=images/but-top.jpg></div> <div content="boxcontent"> <div class="cssnav"><a href="#"><img src="images/but-up.jpg" /><span>Home</span></a></div> <div class="cssnav"><a href="#"><img src="images/but-up.jpg" /><span>This is a test</span></a></div> <div class="cssnav"><a href="#"><img src="images/but-up.jpg" /><span>Forum</span></a></div> </div> <div class="boxbottom"><img src=images/but-bot.jpg></div> </div> <br><br> <div class="box"> <div class="boxtop"><img src=images/box-top.jpg></div> <div class="boxcontent"> <div class="boxtext">This is some text inside of the box. This text should wrap and be padded.</div> </div> <div class="boxbottom"><img src=images/box-bot.jpg></div> </div> Thank you all who help. My boxes line up horizontally perfectly in Firefox but not in IE7 (not suprisingly). Because of the rules I can't show you the link but the html places two boxes side by side lined up so that they are the same distance from the top. It looks right in Firefox but IE7 drops the right box about 10 pixels or so. My Html is this: <div id="newsboxleft"> <div id="newsboxright"></div></div> My CSS is this: #newsboxleft { margin: 10px auto; position: relative; top: 0px; left: -187px; width: 350px; height: 142px; background: url(../images/newsboxleft.jpg) repeat-x top; border-top: 0px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-bottom: 1px solid #000000; padding: 0px; clear: both; } #newsboxright { margin: 10px auto; position: relative; top: 0px; left: 373px; width: 350px; height: 142px; background: url(../images/newsboxright.jpg) repeat-x top; border-top: 0px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-bottom: 1px solid #000000; padding: 0px; clear: both; } I hope someone can help. Thanks. I have 4 or 5 form controls that I want in a horizontal line. Each form control has a label above it, and I'm using <br>s to position the form control below the label. I thought that wrapping each "label<br>form control" with a <span> would turn the whole thing into an inline block, where the next <span> would line up next to it, like the next <td> in a <tr>. Code:
<div id=secondline>
<span id=ed>
<b>Event Definition</b>:<br>
<textarea name=inject cols=45 rows=6></textarea>
</span>
<span id=after>
<b>After</b><br>
<select name=next size=8 multiple>
<option value=0>0
...
<option value=100>100
</select>
</span>
</div>
but, alas, it doesn't work like that. How can I get Code: <tr> <td>label<br>form_control</td> <td>label<br>form_control</td> </tr> behavior without using tables? Hi I am creating a new site for a friend in Wordpress ilovelifebecause.com I can usually muddle through in css to make changes, but i'm stumped at the moment. What I am trying to do is swap around the two cream coloured boxes so the larger one is on the right, the thinner one on the left and the blue box in the middle still. I've tried a number of things in the css file but can't seem to find the right method - can anyone help? many thanks in advance Paul hi, Im making a site, and i decided to use CSS instead of tables. I have used basic CSS before, but it gets abit harder when i start making boxes etc. Here is my code so far - layout.css - (one that gets included on each page) Code: @import "style.css";
body {
margin:10px 10px 0px 10px;
padding:0px;
}
#leftcontent {
position: absolute;
left:10px;
top:50px;
width:200px;
background:#fff;
border:1px solid #000;
}
#centercontent {
background:#fff;
margin-left: 199px;
margin-right:199px;
border:1px solid #000;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 201px;
margin-right:201px;
}
#shoutbox {
position: absolute;
right:10px;
top:50px;
width:200px;
background:#fff;
border:1px solid #000;
}
#rightcontent {
position: absolute;
right:10px;
top:50px;
width:200px;
background:#fff;
border:1px solid #000;
}
#banner, #footer {
background:#fff;
height:40px;
border-top:1px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;
voice-family: "\"}\"";
voice-family: inherit;
height:39px;
}
#footer {
background:#fff;
height:40px;
border-bottom:1px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;
voice-family: "\"}\"";
voice-family: inherit;
height:39px;
}
#banner h1 {
font-size:16px;
padding:10px 10px 0px 10px;
margin:0px;
}
#shoutbox, #rightcontent p {
font-size:10px
}
style.css - text formatting etc. Code: body {
font: 12px/1.2 Tahoma;
background:#ddd;
padding:0px;
margin:0px;
}
a {
text-decoration:none;
font-weight:bold;
color:#c00;
}
pre {
font-size:11px;
color:blue;
}
ol {
margin-right:40px;
}
li {
margin-bottom:10px;
}
p,h1,pre {
margin:0px 10px 10px 10px;
}
h1 {
font-size:14px;
padding-top:10px;
}
it produces a good layout, with a header, 3 coloums and a footer. whoever, the boxes expand at different rates and the footer doesnt move down. the header also doesnt expand. i know how i can fix this, but i dont know how to fix it without making it so that its locked at a resolution. i would like the site to exapand as the window is made larger. here is an image of what i get - and this is what i am aiming to acheive - as you can see, i want all the boxes to be the same length, which is defined by the size of the largest box. also, i want to create 2 or more boxes on the left, only the bottom of which gets made longer. on the first image you cannot see the extra box because it is covered by the other one :-/ i would be greatful for any help you guys can provide me thanks, dynamyt Hello, I created a site with floating frames and it looks good in IE6 and FF/Mozilla. But I have one problem: I use in my dynamic layout an ID more then once (thats not OK according w3 validation) I tried to do something with pseudo classes but this works not really goed. My "uni" thumb box is used on two diff. pages The skyscraper: http://www.all4yourwebsite.com/ and the result/search page: http://www.all4yourwebsite.com/search.php I know there is a solution, but because the tumbbox have to be much flexible the solution must be simple as the current (wrong) solution. Anyone an idea? Hallo, I have in several cases serious problems with floating boxes. Not with the standard layout's like here described http://css.maxdesign.com.au/floatutorial/ but with more complicated layouts. I know to place the float attribute but have problems with setting the clear attribute. Does some know a good source where I find more information or documented examples ? Finally I can fix my problems, but it take so much time of testing... Thnaks Hello: I'm trying to place two drop down boxes at the right of my page. When I view the pages in Firefox and Internet Explorer, they are so far off. You can view the page yourself by visiting: http://www.informedmortgage/100-financing.html I've tried changing widths, margins, etc and am having no luck. I can use some help. I hope someone can help me out. Thank you. Back to top the code below draws a nice hairline textbox <input type='text' name='name' style="border:1px solid black; font-size: 10px; font-family: arial"> the colde below draws a nice hairline texarea <textarea name='msg' rows='10' cols='40' style="border:1px solid black; font-size: 12px; font-family: arial"> but the code below doesn't change anything <select name='sel' style="border:1px solid black; font-size: 10px; font-family: arial"> <option value='1'>first</option> <option vakue='2'>second</option> </select> Is there a way to remove this ugly shade from a selection menu as it exists for textboxes and textareas? Thanks for your help! I'm pretty new to CSS so bear with me if this is a silly question. I want to go totally CSS and 0 tables. 1 problem that I've been having with my site is that I have several forms for data entry. These are of course done in 2 column tables, label in the 1st column, text box in the right. The problem I'm having is that I cannot get the text boxes to line up properly using CSS. I am trying a test page simulating a login page. But since the words Username and Password are different lengths, the left edges of the text boxes don't line up evenly. What is the best technique to get CSS to display 2 columns like a 2 column table where the first 'column' contains a text label and the 2nd column has the input boxes aligned nice and neat? I am trying to color in radio boxes itself, ( example where I want to use it he http://scygro.ath.cx/index.php?option=customize ) but somehow I cannot figure out how to do this. I would like a proper result on both Internet Explorer and Mozilla? Anyone know? I tried to search for this, maybe I'm just blind, but couldn't find anything, only how to color a little block on which the radio button is on top of, which needless to say didn't help much! I came across this site with a google search. I have been trying to make a website for my new business and I've been trying to learn CSS. Everything went fine until I tested resolutions out yesterday, I noticed they changed. I've been trying to place a text box in middle of an image but I can't get it to work correctly... a perfect example of what I'm trying to achieve is found he http://www.myspace.com/nourotika I have tried and tried and this is the website that came closest to my problem... My code would be: Code: <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-color: #000;
}
-->
</style></head>
<body><center>
<p style="position: absolute; top: 735px; right: 314px; width: 537px; padding: 4px; background-color: #000; font-weight: bold; font-size: 11px; font-xolor: #F00; height: 548px; color: #909; overflow: visible; z-index: 1;">content goes here</p>
</div>
http://i158.photobucket.com/albums/t108/Katouuffxi/regular.jpg This would be the regular resolution I'm looking for http://i158.photobucket.com/albums/t108/Katouuffxi/resproblem.jpg And this would be my screen resolution problem Sad I really don't know how in the world to do it and I'm just so close from finishing everything... help would be much much appreciated. I am new to using CSS for more than just text, and I have run into a problem. What I want to do is to have an image with a margin of 3px around it. The problem occus with the background color and border in Mozilla (Fire Fox). The box dosn't fit around the image properly. Does anyone have an idea why this is? --xenite Sorry if I'm being repetitive, this has been discussed before, but still there is something preventing me from making CSS boxes behave properly. Everything has to do with stopping <TABLE> and starting <CSS>-based thinking. I mean, there shouldn't be so much magic and wonderdust as I trick myself into believe. My problem is very simple; I'd like the design to do the following: [wrapper: full width, 5px padding all over] [variable size image container, 2 px padding all over, staying on the left at all times] [variable size text container, staying on the right at all times, stretching full width so it touches the image container] Here's an example of the design: Code: ------------------------ | (wrapper) | ||------||------------|| ||image || text || ||------||------------|| ------------------------ I thought I had it made when I read that you basically can look at creating a table based design as using a combination of DIV's and SPAN's, havind the DIV's being looked at as rows and SPAN's as columns/cells. But for some reason I can't seem to get the full grip out of it. I've had *some* success with this, but I'm having horrible problems with making the text get to the top left of the container. It *always* stays at bottom left, no matter how I adjust my DIV's, SPAN's or properties of those. I can't seem to make the boxes have any actual "space"; when I add margin properties to either box, I can't locate it, it's as if the container isn't there. I can get the wrapper to behace though. While I'm at it, is there some good, solid, documentation of how the boxes work and interact? I've read *alot* of different articles, looked at w3c, checked other peoples code (which actually have teached me the most), but I'd like to have some kind of resource that gives me the knowledge of "box modelling" to such an extent that I should be able to solve in not all but most problems, like this simple one. Thanks for taking time to read through all this. I know it won't become a FAQ or rooted topic, but I'm hoping perhaps someone with the same problem as I have will benefit from this. My problem is getting very frustrating been trying to fix it for ages, and its probably something simple but if i dont fix it soon my laptops going to find a river very quickly. I have a site using CSS(duh!) and when i highlight over a link on the site some of my text moves around. then when i highlight over my javascript drop down menu it moves back. its very strange. heres the link to one of the worse pages for jumping. http://zephyr-wgtn.co.nz/newsite/eventS.aspx Any help much appreciated. Regards Dan Hi, I'm still trying to learn CSS. Using CSS instead of tables really increases the versatility of the page, but, don't the graphics suffer? I'm trying to make a 3column layout which resizes according to the resolution. I've made it, but IMO it would look more appealing if I could make the corners curved as in... the menu box corners and the content space corners. Is there anyway to do this? Hey - So I have a page with a disabled multiple select box, which is automatically populated with the relevant selected value. In Firefox, you can still see the value that's been automatically selected even though it's disabled. But in IE, you can't. Is there a way to make IE show that? Thanks in advance. |
|||||||