|
CSS - Full Width O.o
Hello all! My first post here. I have recently started working with wordpress with the catalyst dynamik child theme.
I am trying to "copy" some theme i found on the internet just to see if i can and maybe learn something on the way. I know some basic CSS and HTML but nothing fancy im learning as i go. My problem is that i have used custom widget area hook to create a widget area after header (catalyst_hook_after_after_header) named it selected a layout (homepage so it shows on the home page) and i have named or assigned "sshook" class to it. The widget are appeared under the header and i added php text widget to it so i can use shortcode like [easingslider] for my slideshow plugin. So ok all that worked out and now i have a slideshow hooked in the widget area under the header. The problem is as follows. The container (?) that is behind the slideshow (.sshook) should be as wide as the page but it isnt. If i set the width to 100% it looks like it ignores it (nothing happens) i have also tried adding !important to it just to make sure it didnt inherit the width from some other element but it didnt work. This is the code i made: .sshook { width: 100% !important; margin: 0px 0px 0px -500px; padding: 0px 0px 0px 500px; background: rgb(226, 227, 227); } Margin goes -500 so that it pulls the background behind the slideshow all the way to the left border of the page and the padding 500 places the slideshow back at the center of the page but the only way i can get the background to show on the right side of the slideshow is to change width from % to px like 1400px but then it is not always spaning the whole page for people with higher resolution and if someone has lower resolution it adds a scroll bar at the bottom of the page because it goes more to the right. I hope someone understands what i am trying to ask here. If anyone needs clarification on any of this let me know and ill clarify. Similar TutorialsI have seen a design which I find pretty interesting where in the main site is aligned left and fixed width at say 700px wide. Yet the footer seems to span the entire screen. The header also seems to use the entire screen width but that is beign accomplished with the background image, but this footer goes all the way to end of the screen and naturally adjusts itself under all the content. Is there a way to get this effect? I'm trying to create a full width bar across the page. My current attempt is at: http://www.mixicon.com/dev/test.html It is currently working in Safari, but not in Firefox.I'm open to opinions in what I might be missing here, any thoughts? I'm mostly happy with how it looks in Safari, so I need any help to get it there in other browsers. The attached image shows what it should look like. Hey everyone, I was trying to figure out what the default display properties for a div are. What I'm trying to figure it out for is because I want to be able to set up other elements to behave the same way. This way I don't have a zillion DIVs on my page. I could set it so that My header uses something like: Code: HTML <body> <h1 id="header">Header</h1> This way I could use CSS to cause it to span the full width of the page and behave the way I'm used to having things behave. I think it might just be a width:100% but I can't find anything on it. But if I remember correctly you have to set a DIV to display:block to be able to define a width. Trying to delete my post but no option to delete so just removing content. Hi, I have hit the "wall" in my knowledge of CSS while trying to implement a "flex-width-equal-height-sidebar-layout" style of layout as a skin/theme for a message board system and need some help. My trouble occurs when a direct link to the post is used (instead of following the menu navigation system) where the top menu information/links area (the area between the banner and the post) is chopped off... The relevant portion of the CSS seems to be the .col_wrap {margin-top: 10px; border: 0; overflow: hidden; float: left; width: 100%; position: relative; z-index: 10; clear: both;} portion of my CSS because if I take out the overflow:hidden declaration then the menu portion of the skin/theme/layout shows correctly but the sidebar the shows the part which should be hidden at the bottom and the footer completely vanishes from view! My apologies but this is the best I can do without having the ability to post pics or urls which could better explain what is wrong and frankly speaking I don't know how anyone here can help given my inability to show the problem but hopefully someone knows or has run into this problem before or can offer some resources that may be of assistance.... i ve been playing with my page and been trying to modify the width of the page (divs) according to the browswer's width. The problem is i want the navigation menu on left to be fixed width (say 200px) and the center div and the right column to be variable width. Also, i want to set a minimum width , so that the floating divs dont roll below the navigation menu. here s the link to the page. try reducing ur browser windows size . the content div rolls down under theleft nav menu. http://ccc.1asphost.com/pacemakerpr...r/cicuitlab.htm Also , i get wierd result in netscape navigator. please help I have an absolutely positioned <div> containing a block of text. I have not specified a width for this <div>. This <div> is nested within another <div> for which I have specified a width of 200px. So something like: html4strict Code: Original - html4strict Code <div style="position: relative; width: 200px;"> <div style="position: absolute; top: 10px; left: 20px; z-index: 100;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur eu purus a tellus mollis consequat. Phasellus aliquam sapien quis mauris. </div> </div> <div style="position: relative; width: 200px;"> Since the absolutely positioned <div> is not part of the page's normal flow, I would expect that its width would expand according to its contents (and the browser window's boundries). Instead, in Firefox only, the width of the absolutely positioned <div> expands only to the width of its parent - in this case 200px. Am I doing something wrong? or is there a workaround for this? Ok. Here's the problem: I have a asp.net 1.x datagrid inside a floated div and I want the datagrid to stretch the width of the div. This div is in the center of two other floated divs. Is there a way to make a table go 100% the width of its container div? Css code: Code:
/* left bar: */
#navBar{
width: 185px;
float: left;
}
/* right bar: */
#rightModulesContainer {
width: 130px;
margin: 0;
padding: 0px 0px 0px 10px;
float: right;
}
/* center content: */
#content{
padding: 0px 5px 0px 0px;
margin-top:0;
margin-bottom:0;
margin-left:4px;
margin-right:0px;
float: left;
text-align:left;
/*display: inline;*/
}
/* contained in #container: */
#dataGridContainer{
margin: 0;
padding-bottom: 10px;
min-width:360px;
}
.categoryGridStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
color: #000000;
width:100%;
}
and here is the layout of the divs: Code: <div id="navBar">left navigation bar here (tree view)</div> <div id="rightModulesContainer">right side bar here</div> <div id="content"><div id="dataGridContainer">datagrid here</div></div> Thanks for your help in advance. I've been messing with this for a while - trying to get it to work cross browser is driving me nuts. I've tried placing the divs in containers and floating the containers, I've tried everything I can think of... Hello, (please also see attached/uploaded style sheet) I'm puzzled why (in the following code) the TEST #2 table renders as required (i.e. 2 rows in 1 column, all with the same cell WIDTH) but the table in TEST #1 seems to render the table cells (i.e. 2 columns in 1 row) without a common cell WIDTH. How can I get all the cells (there are plenty more!) in table TEST #1 to all be exactly the same width (preferably 85px)? Code: <link rel="stylesheet" type="text/css" href="http://thinet/cgi-bin/thinetStyleSheet.css"> TEST #1 <table class="menu" border=1 CELLPADDING=2> <tr> <td class="pinkButtons"><a title="Treats menu" href='http://thinet/theread/forumdisplay.php?s=&forumid=82'>Treats</a></td> <td class="pinkButtons"><a title="New Starters, Leavers and Transfers" href='http://thinet/theread/forumdisplay.php?s=&forumid=41'>Joiners etc.</a></td> </tr> </table> <P> TEST #2 <table class="menu" border=1 CELLPADDING=2> <tr><td class="pinkButtons"><a title="Treats menu" href='http://thinet/theread/forumdisplay.php?s=&forumid=82'>Treats</a></td></tr> <tr><td class="pinkButtons"><a title="New Starters, Leavers and Transfers" href='http://thinet/theread/forumdisplay.php?s=&forumid=41'>Joiners etc.</a></td></tr> </table> I don't think I've quite grasped the idea of CSS yet?!?! Any help/pointers would be appreciated. Thanks, Andy I'm at the very very very begaining of a table-less design (my first, actually). The problem is, since I have decided to have a non-fixed width, when the browser is minimized, at a certain point the design breaks. See it here (please don't make fun! it's just the start): SiliconSatan.com/test.php I'd like to set a minimum width, probably on the container <div>, so at a certain point it sort of becomes like a fixed width? No smaller than a set width? [EDIT] Also, I have a question about background color mismatch, but it was not quite OT for the CSS forum: http://forums.devshed.com/web-desig...e7t-403266.html I have a header div with a background image - it's basically a pair of hands holding a banner - the arms extending to the sides of the window. I'm trying to work it so that, no matter how wide or thin the window, the arms will always extend to the sides. So when you make it smaller, the image will disappear beyond the viewing window. This happens automatically on the right-hand side, but the image is stopping it on the left. Is there a way to set a min-width, which is smaller then the image itself, so that when the window is shrunk the image starts to disappear on either side until it reaches the min-width? I'm trying to get it so the arms will disappear and stop at the hands. Or can anyone suggest an alternative solution? I tried to do it with background and header image, with the arms on the background, so when the top image moves it looks like the arms move with it. That worked great until I started using a patterned background. Full width: |---------------------------------------| |AAAAAAAAHHH BBBBBBBBBBBBBB HHHAAAAAAAAA| |---------------------------------------| Shrunk width: ------- |------------------------| -------- AAAAAAA |AHHH BBBBBBBBBBBBBB HHHA| AAAAAAAA ------- |------------------------| -------- Grey bit outside window edge. | Window side A Arms H Hands B Banner I hope that makes sense. I expect there's an easy solution but I've been trying to figure it out for several hours and could do with someone else's perspective. Thanks. I have a page with an ASP.NET Gridview on it...this Gridview is located in a child DIV inside a parent DIV. That Gridview can often go wider than the parent DIV width set. In IE6 the MAINDIV (Parent DIV) would expand to fit the expanded Gridview contained within the child DIV. In IE7 the DIV will not expand so it overlaps the DIV and looks bad. I want that MainDiv to dynamically grow with the child DIV width, like it did in IE6. Please see my code below. I want the MainDiv to remain ~800px unless it is pushed out further. Thanks for any ideas on a fix for this. Whenever I try min-width it just blows the parent DIV out to 100% screen size. Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
</head>
<body style="width:100%;text-align:center;background-color:#68838B" onload="loadpage();">
<form id="frmMain" runat="server">
<div id="mainDiv" style="position:relative;top:10px;width:800px;height:auto; background-color:white;border:solid 1px #666666">
<div id="contentDiv" style="text-align:left;width:797px; padding:3px 3px 3px 3px;">
<asp:ContentPlaceHolder ID="contentBody" runat="server"></asp:ContentPlaceHolder>
</div>
</div>
</form>
</body>
</html>
I've run into yet another IE "feature" that i'd like to ask you, dear colleagues, how to solve. I have a relatively positioned div and i need to absolute position another div inside of it to fill almost all width and height of the parent. I need it to have a 20px margin from top and bottom. Here's what works in real browsers: Code:
.somediv{
position: absolute;
left: 0;
top: 20px;
bottom: 20px;
right: 0;
}
Now how do i make it work in a developer's nightmare IE? There are 2 more divs in top and bottom both 20px high so the new div shouldn't overlap with them. Hi all! After trying more then a few things I'm about to give up, so I hope someone here has the answer. The problem is the following: * A website contains 3 DIV columns and an header at the top, this is all inside a single wrapper DIV which centers the webpage. * All three columns should have the same length as the longest column. * When the content in the 3 DIV columns is shorter then the height of your browser window, the DIV elements should fill-out until the bottom of the screen. Point 2 is doable. Point 3 is doable. But the combination of point 2 and 3 seems quite hard. Hope someone has an idea . Thanks! Hi all, I have this headache problem ... check it out here on my site You see that menu ? it should be all over the #bar, but it just minimizes it to that small size. It should be all over the #bar Thanks !!! sorry cant work out while the site will not centre have a full div id wrap with margin 0px auto. Still wont centre something so simple. all as i can think is it is the float:left; but removing sends the layout wild and ont know what to reaplce it with. Code:
<style type="text/css" media="screen">
#wrap {
width:960px;
margin:0px auto;
}
#header {
float:Left;
width:950px;
margin:5px;
height:180px;
border:#000 1px solid;
}
#off1 {
float:Left;
width:310px;
height:120px;
margin:5px;
border:#000 1px solid;
}
#off2 {
float:Left;
width:310px;
height:120px;
margin:5px;
border:#000 1px solid;
}
#off3 {
float:Left;
width:310px;
height:120px;
margin:5px;
border:#000 1px solid;
}
#main_content {
float:Left;
overflow:hidden;
width:960px;
height:auto;
margin:auto;
}
#leftcol {
float:Left;
margin:5px;
border:#000 1px solid;
width:590px;
height:auto;
}
#rightcol {
float:Left;
margin:5px;
border:#000 1px solid;
width:350px;
height:auto;
}
#footer {
float:Left;
width:950px;
height:auto;
border:#000 1px solid;
margin:5px;
}
</style>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Super Saver Ltd</title>
</head>
<body>
<div id="wrap">
<div id="header"></div>
<div id="off1"></div>
<div id="off2"></div>
<div id="off3"></div>
<div id="main_content">
<div id="leftcol"></div>
<div id="rightcol"></div>
</div> <!---main content end--->
<div id="footer"></div>
</div>
</div><!---main container end--->
</body>
</html>
I am building a template page, this has the header only stored in the page, then a php page is loaded from a different file as the body of the page, how do i set a full path to my css style sheet via the template page: i.e. http://mysite.com/styles/mycss.css for some reason this doesn't work! I can't set the path using '../../styles/mycss.css' because the template file will be stored in many different depths of my site, SO: How can i set some sort of path to the css file? any help will be appreciated! Cheers, Alex. I have a DIV which I have set the height to 100%. I understand that height: 100% means that it will fit up to 100% of the viewable screen area. How would I define it so that it expands to fit 100% of the content area? Meaning that if the content scrolls more than 100% of the height of the screen, the background will stretch to fit the whole content height. The URL with an example of the site I'm working on is: http://hawaiihomebrew.com/os_comm/index.php?cPath=50_51 The site is not complete so please bare with some of the broken images and all that. When my products extend beyond the height of the screen the white background stops at the point before you have to start scrolling and I want it to extend the whole height of the content. My css is below. The right_col class is the one that contains the content in question. Code:
/* CSS Document */
body {
font-family:Geneva, Arial, Helvetica, sans-serif;
color: #000000;
font-size: 80%;
background-color: #ffffff;
margin: 0px 0px 0px 0px;
background-image: url(../images/hw_back.gif);
}
#left_col {
position: absolute;
top: 0px;
left: 0px;
padding: 10px 10px 10px 10px;
height: 100%;
width: 18%;
background-color: #63782B;
background-image:url(../images/hw_back.gif);
}
#right_col {
position: absolute;
top: 0px;
left: 18%;
height: 100%;
width: 82%;
background-color:#FFFFFF;
}
#cart_rt {
position: absolute;
top: 0px;
right: 0px;
padding: 10px 10px 10px 10px;
height: auto;
width: 35%;
text-align: right;
}
#cart_lt {
position: absolute;
top: 0px;
left: 0px;
padding: 10px 10px 10px 10px;
height: auto;
width: 35%;
text-align: left;
}
#content {
position: absolute;
top: 20px;
left: 0px;
padding: 10px 10px 10px 10px;
height: auto;
width: 100%;
}
This seems like it should be very easy to do but something is preventing it from working. I was following the guide at http://www.alistapart.com/articles/negativemargins but with my navigation column on the left. A summary of my layout right now is: <div id="wrapper"> <div id="container"> <div id="content"> </div> </div> <div id="navigation" <div id="navlist"> </div> </div> <div id="clearing"> </div> </div> my css: #container { float: right; margin-left: -16.8em; width: 100%; background-color: #2586d7; } #navigation { float: left; width: 14em; background: #90bade url(navimage.jpg) repeat-y: right; } #wrapper { background: #90bade url(navimage.jpg) repeat-y: right; } #navlist is a div containing a styled ul for navigation. #clearing { clear: both; height: 0; } So basically the navigation div is supposed to extend to the bottom as far as the container div goes. According to the guide at AListApart it should be working but is something else in my code interfereing? If everything above should work fine, I can post a link to the test file so you can see the rest of the code. Thanks for any help! |
|||||||