|
CSS - 'shadow Border' Either Side Of Layout
Hey people, when slicing a new layout for my site I had to do so in tables for the sole reason of a problem I've had for a long time now, how to have a border images set for either side of an image?
The layout is he http://www.trshady.com Now as you can see, either side of the layout I have a .gif 'shadow' which fails due to .gif not handling gradients and .png being uncompatable transparency with IE but how would I ever add these borders with CSS? Say they wasn't shadows and images of other kinds .. how would I be able to achieve such an effect? the border-image property is coming with CCS3 I believe but till then, what solutions do I have? Similar TutorialsHello, I am wanting to add a shadow to both sides of the container box i have for my css site layout. Is this possible. I was using border-left and border right applying the border settings but i would like to have a more of a shadow result. Can anyone help me with this please? Many thanks in advance. Hi, I am new to css codes , so please help me with my problems if u can. I want to add a shadow to my border from all sides to my image . So, I'm trying to find out if there's an easy way to create a shadow around a border. Essentially, I've got a white background div, with an inner div that takes up part of the white. The inner div has a gray background, and I want to somehow give it the impression of being raised from the white. I couldn't find too much searching through google.. then again, not sure what exactly I need to search for in google. Any help would be greatly appreciated. Thanks Hi, What would be the best way to create a hover effect as seen on the "Get Started" button he http://themeforest.net/item/mingle-multipurpose-wordpress-theme/full_screen_preview/235056 Thanks! problem solved - it seemed that the inside box was too close to the outer one, so i gave it some padding and the border-line now shows. weird is, that it is now a little bigger than the other element, but i can live with 2px ... for now hi folks, i really dislike IE i make the design for my webstore ... still i only want to use floats (no tables or other positioning) ... i am slowly advancing ... right now i am pretty much stopped in my tracks, because IE does not display the right side of 2 of my boxes (those are very similar in layout). the boxes concerning have an outer DIV and an inner DIV. the outer has a specified width in px and overflow:hidden (which has helped keeping the width). the content is other DIVs and text. note that a similar box with a UL in it does indeed display the thin borderline all the way around ..... and this is what drives me nuts. LINK concerning boxes are the shopping cart on the top right and the mailing list box on the bottom left note that the similar costructed box with the navigational menue in it above the mailinglist box does display the borderline .... oh, and in firefox everything is fine of course on a side note .... in IE; hovering over any hover item results in the bdy text losing its background color?! i am not even challenging that one yet it would be great if someone could help me out here Code:
this is for the shopping cart box:
#header_right {
color: black;
font-size: 80%;
background-color: white;
margin-top: 0.5em;
margin-right: 1.5em;
padding-left: 10px;
width: 150px;
height: auto;
overflow: hidden;
float: right;
}
#header_right_content {
color: #fff;
background-color: #f8f2dc;
padding-top: 0.5em;
padding-bottom: 0.6em;
height: auto;
border: solid 1px gray;
}
Floats always cause me some consternation. This one sort of works, except for the border and the padding/margin (which may be related to the border issue). I've only checked this on FF on a Mac so far, btw. Right now the divs do float, but the left side of the border is a million miles away. Solving the border issue might take care of the padding/margin between #caravan and #rally (right now each tweak does nothing). Also, is it possible to get the text at the end to flow under the property changes box? Probably not, as I set a width of 65%, but that was the only way I knew to get the two boxes to float up...I guess I'd have to make that last paragraph its own div to get the text to go all the way across? The page I'm trying to figure out is here and the relevant CSS is #caravantop { background-color: #ffefca; margin: 0; padding: 1.2em 2% 0 2%; } #caravan { float: left; width: 63%; background-color: #ffefca; padding: 0; margin: 0 2% 0 2%; } #rally1 { padding-right: .1em; border: 1.2px #775b36 solid; margin-right: .5em; margin-bottom: 1em; } #rally1 h4 { margin-bottom: .6em; } #rally1 p { font-size: .7em; padding-bottom: 0; margin: .6em; } #rally1 ul { list-style-image: url(../images/icons10_webpage.gif); list-style-type: circle; text-decoration: none; font-size: .7em; margin-bottom: 1em; margin-left: 2.5em; } #rally1 li { margin-bottom: .4em; margin-left: 1.7em; } #rally1 li.lastli { margin-bottom: 2.5em; } /*#rally1 ul.nohouse { list-style-image: none; list-style-type: none; text-decoration: none; font-size: .8em; margin-bottom: .3em; margin-left: 0; }*/ #rally2 { padding-right: .1em; border: 1.2px #775b36 solid; margin-right: .5em; margin-bottom: 1em; } #rally2 h4 { margin-bottom: .6em; } #rally2 p { font-size: .7em; padding-bottom: 0; margin: .6em; } #rally2 ul { list-style-image: url(../images/icons10_webpage.gif); list-style-type: circle; text-decoration: none; font-size: .7em; margin-bottom: 1em; margin-left: 2.5em; } #rally2 li { margin-bottom: .4em; margin-left: 1.7em; } #rally2 li.lastli { margin-bottom: 2.5em; } Hi. While I was editing the layout I suddenly noticed that the news section in the middle is 2 px on the side. the adress of the page is: www. mjc4. com In Opera the it is moved 1px the right and in the FF and IE7 it is moved 1px to the left. I could move it around so that FF and IE7 displays the layout properly but there will be a 2px hole in Opera and that does not seem like a reasonable solution for me. I can not get the layout right, may be you have some ideas? I'm working on a new design for my blog and having a problem with a border. I have a three column layout and want to have a border on the left, right, and bottom the container div, but instead of surrounding it it just sticks it at the top by itself. Heres the page and css Code:
<!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" />
<link href='http://fonts.googleapis.com/css?family=PT+Serif:regular,bold' rel='stylesheet' type='text/css' />
<link href="style.css" rel="stylesheet" type="text/css"/>
<title>3 Column Liquid Fixed Fixed CSS Layout</title>
</head>
<body>
<div class="wrapper3">
<div class="header3">
<img src="logo.png" alt="SuperSonicMoose" />
<div id="line1"></div><div id="line2"></div>
</div>
<div class="wrapleft3">
<div class="left3">
<div class="article">
<h1>Article Title</h1><h2>Posted on Friday, March 11th, 2011</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href="#">Read More >></a></p>
</div></div>
</div>
<div class="middle3"><div class="article">
middle fixed
</div> </div>
<div class="right3"><div class="article">
right fixed
</div> </div>
<div class="footer3">
footer
</div>
</div>
</body>
</html>
Code:
.wrapper3{
width: 93%;
min-height: 100%;
margin: 0 auto;
border:4px solid #333333;
}
.header3{
background-image: url(headbg.png);
float: left;
width: 100%;
background-color: white;
}
.wrapleft3{
float: left;
width: 100%;
background-color: #ffffff;
}
.left3{
margin-right:410px;
background-color: #ffffff;
min-height: 200px;
border-right:#E9F6FC solid 2px;
}
.middle3{
float: left;
width: 265px;
margin-left: -406px;
background-color: #ffffff;
min-height: 200px;
}
.right3{
float: right;
width: 135px;
margin-left: -137px;
background-color: #ffffff;
min-height: 200px;
border-left:#E9F6FC solid 2px;
}
.footer3{
float: left;
width: 100%;
background-color: #ffffff;
}
body {
background-image: url(pgbg.png);
padding: 0px;
margin: 0px;
background-color: #8CD4F1;
font-family: 'PT Serif', arial, serif;
}
#line1 {border-bottom-style: solid; border-bottom-color: #8CD4F1; border-left-width: 0px; border-bottom-width: 4px; border-right-width: 0px; border-top-width: 0px; width:99%; margin: auto;}
#line2 {border-bottom-style: solid; border-bottom-color: #E9F6FC; border-left-width: 0px; border-bottom-width: 4px; border-right-width: 0px; border-top-width: 0px; width:98%; margin: auto;}
.left3 h1 {
margin: 0;padding: 0;
color: #4A7280;
font-size: 20px;
border: 0px;
border-bottom: 1px solid #E9F6FC;
width:70%;
}
.left3 h2 {font-size: 11px; color: #666666;margin: 0;padding: 0;
}
.left3 p {font-size: 12px; color: #5F5F5F;}
.article {padding:10px;}
a { text-decoration: none; color: #B83352; }
I'm sure its something stupid but I haven't been able to figure it out all day. I am trying to create a web page layout using CSS instead of tables (what I usually use). The content of the page is a fixed width, where the background just expands to keep the content part centered. The problem I am running into is adding a shadowed border (created in photoshop) to this content area. With tables I would just create a narrow 10 px column on each side of the content and use the shadowed gif part as the backgorund on each side. But I want to try to do this with CSS any help, ideas, or links to a page explaining this is greatly appreciated as I am not really turning up much. Here is a pic to explain the shadow (which runs vertically along both sides of the white content area) I am tyring to accomplish. Thank you Hi, I'm having a strange problem. I finally got my layout designed so that it works in both IE and FF and will work scale correctly in relation to screen resolution but now with one aesthetic defect. I have it set up so that the side navigation and the body are scaled 25%:75% but I would like a "thin solid" border between the two. My problem is that when i add the border it exceeds 100% and pushes the main content area underneath the menu. Heres the code for the page; and yes the styles will eventually be moved to the external CSS. right now the only thing the external CSS provides is the body's background image. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title> TEST PAGE 2 </title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <link rel="stylesheet" type="text/css" href="stylesheets/default.css"> </head> <body> <!-- LOGO ROW --> <div id="logorow" style="background-color: #FFFFFF; height: 100px; border-bottom: medium solid #7D5D10;"> <img src="/Images/owlstreelogo.jpg" height="100px" width="300px" alt="Welcome to Owl's Tree"> </div> <!-- END OF LOGO ROW --> <!-- TOP NAVIGATION ROW --> <div id="topnavigationrow" style="background-color: #FFFFFF; padding: 0px 0px 0px 0px; font-weight: bold; text-align: center; border-bottom: thin solid #7D5D10;"> INSERT TOP NAVIGATION ROW LINKS HERE </div> <!-- END OF TOP NAVIGATION ROW --> <!-- CHANGING CONTENT AREA --> <div id="changingcontent" style="background-color: #FFFFFF;"> <!-- SIDE NAVIGATION AREA --> <div id="sidenavigation" style="background-color: #FF0000; width: 25%; float: left;"> </div> <!-- END OF SIDE NAVIGATION AREA --> <!-- BODY CONTENT AREA --> <div id="bodycontent" style="background-color: #0000FF; width: 75%; float: left;"> </div> <!-- END OF BODY CONTENT AREA --> </div> <!-- END OF CHANGING CONTENT AREA --> </body> </html> I want to add "border-right: thin solid #7D5D10" to the side navigation section but when I do i'm faced with this problem. Any idea on a solution to this problem? Oh yeah and as a side not all these sections will eventually have a white background so i'm not worried about the height of them not matching because it will be unnoticable, the sections are just colored so I can see where each section starts and ends. And another random question i'm not too worried about: If i fill a section (eg. the main content section) with a single character over and over past the width of the section without spaces it overflows and displays outside the div tags boundaries. Why does it do that? and is there anyway to make sure the text wraps in the extremely rare case this would happen? Thanks in advance to anyone reading this Thanks for taking time to read my question. How do I position 3 pictures beside eachother with no spaces between them? (so they look like one continuous picture) eg: ______ |1|2|3| |_|_|_| instead of ________ |1||2||3| |_||_||_| Thanks, Brad Hi, I'm having a slight problem with my css. I want to display a comment with a number of images to the right of it. e.g "Excellent" plus 5 stars next to it (note: images of stars) so i tried this: Code: <div id = "commentText"> Excellent </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "commentText"> Fantastic </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "star"> </div> css Code:
#commentText
{
font-size: 100%;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
padding-left: 30px;
}
#star
{
display: inline;
height: 24px;
background-image: url(images/star.png);
background-repeat: no-repeat;
padding-left: 20px;
}
I currently have comment with 3 stars displayed underneath it - however they are only half being shown for some reason. Any help is appreciated to help me get the desired effect. Thanks! Alright, I run a joomla site and im working on making a 100% tableless xhtml compliant template. I'm very new at this so im trying my best to learn. I used the Lean version of skidoo's layout as the base and then added all the appropriate php tags needed to make it a joomla template. For the one part I need two modules to load right next to each other near the top of the page to mimic the table version of the Latest News and Popular Modules. I'll show you code snipits of how I did it. Code:
html:
<div id="contentColumn">
<div class="inside">
<!-- middle column content begin -->
<p class="blocktext">
<?php mosLoadModules( 'banner', -1 ); ?>
</p>
<div id="users">
<?php mosLoadModules ( 'user1' ); ?>
</div>
<div id="users">
<?php mosLoadModules ( 'user2' ); ?>
</div>
<p>
<div id="nofloat">
<?php mosLoadModules ( 'top' ); ?>
<?php mosMainBody(); ?>
<?php mosLoadModules ( 'bottom' ); ?>
</div>
css:
/*top users */
#users {
float:left;
width: 300px;
}
#nofloat {
float: none;
}
So anyways this does indeed put each div tag side by side but my problem is that I need the following PHP code ( <?php mosLoadModules ( 'top' ); ?> <?php mosMainBody(); ?> <?php mosLoadModules ( 'bottom' ); ?>) to return to the next line after the div's, but instead it jumps everything to the right and breaks the template. So I added the nofloat css and that fixed it and put the rest of the content below the side by side div's but now it doesn't work in FireFox. Now I tried padding-top and that worked in both browsers, but its not flexible as the side by side div modules are not always there and I don't want 200px of white space on the pages that don't show it. Also as a side note I tried putting <?php mosLoadModules ( 'user1' ); ?> and user2 into separate div tags that that floated left and right but it had the same outcome, so I stuck with one float left that seems to work the same. My question is what can I do to make this content show after the side by side div's and not beside it in both browsers? You can see what I mean by looking at this test site in both IE 6 and FireFox. http://www.wii-volution.com/testbed/ Thanks for any help you guys can give me! Hi. I'm a design student working on a website for my boss, and I've come across a problem and was wondering if someone could help me out. It might be a simple fix, but I can't seem to figure it out. I have a body wrapper div (subtitle, body text, etc) on the left that's approx. 705 px wide and a vertical navigation bar div on the right that's about 240 px wide. I've tried floating the body wrapper left and the navigation buttons right, but one always ends up sitting below the end of the other. When I use the "clear right" or "clear left" commands, it doesn't help. Any ideas what I could do to get them to line up on the top? I want them to sit next to one another. Thank you very much for any ideas! Britta Hi! I want to have let's say 4 divs of width:25% horizontally side-by-side. Ex: (I'll ry to draw it ) | | | | | | | | | | | | | | | Thank you. Hi. I've a div container with a gray bg color then inside I've two DIV (left & right). It works on IE but on firefox the bg color the the two DIV is white and if I add bg color=GRAY for the 2 DIV the middle is white. And I don't want to put bg color on the class = left and right because if I want to reuse these with other stuff then the color won't match to other things. How can I fix this problem? Please take a look at the following link with IE & firefox and u know what I mean. Please take a look at source code or in here. Thank you!!! http://yourbestproduct.com/test.html CSS CODE: body { text-align: center; } #container { width: 800px; margin: 0 auto; } #sub_title { background-color: #E6E6E6; background-repeat: repeat; padding: 2px; width: 796px; color: #848484; } .left { float : left; margin-left: 10px; } .right { float : right; margin-right: 10px; } HTML CODE: <div id="container"> <div id="sub_title"> <div class="left">Left Message</div> <div class="right">Right Message</div> </div> </div> So I'm not really new to CSS or HTML though I might as well be considering the last time I did anything in either that had much substance was a class back in high school, about 6 years ago. This is what I want... DIV1 --------------- DIV2 --------------- DIV 3 2 would be in the center with 1 and 3 floating left and right respectively. Instead I'm getting this... DIV1 --- DIV2 ----------------------------------------- DIV 3 or DIV1 DIV2 DIV3 ...I hope you guys get the idea. I'm having trouble figuring it out. My ext CSS sheet, if you care to look, is he http:// livingway.110mb. com/mainstyle.css the frame in question, he http:// livingway.110mb. com/main.htm I'm hoping it'll let you all look at them. It's nothing professional yet because I'm only trying to give an update idea to our "webmaster". Anywho, let me know what I'm doing wrong. My brain hurts right now. I've been having some issues getting a design for a site I'm co-authoring to display correctly using CSS. I know that what I'm trying to do should be possible, but I haven't been able to figure it out and am getting pretty damn frustrated with the whole thing. I could probably do it with tables, and right now I have it set up with some javascript that I threw together, but css+divs would be the ideal solution. Anyways, this is basically what I want to try and do (that's the javascript version). Just resize the window a bit to see what i'm getting at. Here's the source: Code: <!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=iso-8859-1" />
<title>Title</title>
<style type="text/css">
<!--
#leftpane {
float: left;
height: 100%;
border: 1px solid black;
}
#rightpane {
float: right;
height: 100%;
border: 1px solid black;
}
-->
</style>
<script type="text/javascript">
<!--
// get rid of all this javascript and figure out a way to do this with css
var windowWidth = 800;
window.onload = function() {
getWindowSize();
resizeLeftPane();
}
window.onresize = function() {
getWindowSize();
resizeLeftPane();
}
function getWindowSize() {
if(window.innerWidth) {
windowWidth = window.innerWidth;
} else if(document.documentElement.clientWidth) {
windowWidth = document.documentElement.clientWidth;
} else if(document.body.clientWidth) {
windowWidth = document.body.clientWidth;
}
}
function resizeLeftPane() {
var rightpaneWidth = document.getElementById('rightpane').offsetWidth;
var margin = 10;
document.getElementById('leftpane').style.width = String(windowWidth - rightpaneWidth - margin * 3) +'px';
}
//-->
</script>
</head>
<body>
<div id="leftpane">
<p>this pane needs to stretch as wide as it can while leaving room for the image at right, whose width is arbitrary</p>
</div>
<div id="rightpane">
<img src="http://movingboxstudios.com/testz0rz/images/box.jpg" height="100%" alt="image" />
</div>
</body>
</html>
Basically I need a way to have 2 elements next to eachother, 1 of which is an arbitrary size and the other be wide enough to fill the rest of the containing block. Any help would be much appreciated. EDIT: Here's a link to the actual working design, maybe that'll help in understanding my question (don't open it in IE unless you want a facefull of ugly). |
|||||||