|
CSS - Unselectable Text Due To Divs?
Hi guys
Im having issues with unselectable text. Im using a full css layout with a fixed div header, footer and sidebar - along with a full css pop-out menu system. http://www.clevedonschool.org.uk Forgive the awful design it was the clients choice to use this layout, colour scheme and design! The problem Im having: The text that appears in the scrollable part of the page is unselectable where it lies parallell with the side nav. In Firefox links that appear in this 'dead-zone' cant be clicked either which isn't really acceptable. In IE its slightly better but less than ideal. Ive played about with z-index's and positioning but no luck. Does anyone have any suggestions? Similar TutorialsI'm working on an experimental website at http://www.abdn.ac.uk/~u12cb4/new/ I'm trying to get the main text to flow around the divs floating at either side but as you can see it's not happening. Can anyone offer a suggestion? Thanks, Bailz 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 am a bit lost as to how to accomplish the following: I have two divs of unequal width, let's say 300 and 100 for example. I need to float both of these divs to the right and have them stacked on top of each other. That's easy enough on it's own, but I need text to wrap around them properly. ie if the wide one is on top the text should flow to it's left edge, then flow underneath it it the narrow divs left edge, then underneath the narrow one. I tried doing this with relaitve positioning, but have had no luck. If I simply float them both to the right, they line up side by side as expected. If I wrap them both in one container div, the text will flow to the left edge of the wide div but obviously not wrap underneath it to the left edge of the narrow div. Any ideas? Trying to achieve this: I'm having trouble figuring out how to float the right ad space correctly. This is what i've got so far: http://gatehouse.graffetto.com/floating_divs.html Code: Code: <html>
<head>
<style type="text/css">
.mainDiv {margin: 0; border: 1px solid black; padding: 10px; width: 600px; float: left;}
.image {height: 100px; width: 100px; background-color: red; float: left;}
.rightAd {float: right; background-color: blue; height: 250px; width: 300px; clear:right; margin-top: 300px;}
</style>
</head>
<body>
<div class="mainDiv">
<div class="image">test</div>
<div class="rightAd">test</div>
<div class="textDiv">
Text content
</div>
</div>
</body>
</html>
I know this is simple i just can't figure it out for some reason.. thanks for any help. Hi, I wonder if you can help me, In FF, this site has it's rows messed up. If you scroll down towards the bottom the colours become out-of-sync with the text. Can anyone help? (It works fine in IE and Opera) Thanks CSS Code (scroll down): http://jigsaw.w3.org/css-validator/...&usermedium=all Thanks again I have a blog and I want to put my text inside a border/wrapper. So I've made the border and sliced it up into 3 parts: top middle and bottom. I want to place the text content within the middle of this graphic and so I figure I need to make the sliced images as a background using css and then type whatever I want over it. So I did this but dont know what Im doing wrong: Code:
<style type="text/css">
top {background: url('/images/t1.gif') ;}
middle {background: url('/images/t2.gif') ;}
bottom {background: url('/images/t3.gif') ;}
</style>
<div class="top" id="top"></div>
<div class="mid" id="mid">
<div class="content" id="content">Content Goes Here</div>
</div>
<div class="bottom" id="bottom"></div>
Any help is appreciated. JH Ok, so I've learned to stay away from tables when you don't need them, and I have an instance where this is the case. I have a container div that has a header, content and a footer. On my home page, I have to divs next to each other with the same height and a div below them towards the right. To simplify my problem, look at this example. Code:
<html>
<body>
<div style="float:right">
Hello there!
</div>
<hr>
</body>
</html>
If there's a "float:right" on that div, the hr tag below doesn't get pushed down. But if I use relative positioning and don't use the floats, I can't put the two top divs next to each other. The other option is to use absolute positioning, but again content below doesn't get pushed down correctly. It seems that using "clear:both" works, but it seems weird that this has to be done. For example if I have floating divs in a container, I can get them to stretch out the container like so: Code:
<html>
<body>
<div style="border: 1px solid #000; ">
<div style="float:right">
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
</div>
<div style="clear: both"></div>
</div>
<hr>
</body>
</html>
Am I missing something fundamental here? Is there a better solution? Thanks in advance. Here's the site in Question: http://www.winchps.vic.edu.au It's a standard fixed width floated DIV columns with a wrapper. One thing it does have is a second DIV inside both columns to display the Gradient background over the top of the repeated background. It works perfect in Firefox & IE7 (with a tweak) but IE6 mkes the sidebar nested div drop below the original sidebar DIV click here for a screenshot for those lucky enough not to have IE6. Here's the CSS code for the basic layout: Code:
body {
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-size: 12px;
text-align: center;
margin: 0px 0px 60px 0px;
padding:0px;
border: 0;
line-height: 2;
}
#header {
width: 802px;
}
#wrapper {
width: 802px;
margin:0px;
padding: 0px;
text-align: left;
margin: 0 auto;
background: url(images/bodybg.jpg) center repeat-y;
}
#content {
padding: 0px;
margin: 0px;
}
#maingrad {
background: url(images/winchcontentgrad.jpg) top left repeat-x;
padding: 10px;
}
#main {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
#mainstop {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
border-bottom: solid 1px #000;
font-size: 10px;
}
#sidebargrad {
background: url(images/winchsidebargrad.jpg) top left repeat-x;
padding: 10px 5px 0px 10px;
}
#sidebar {
width: 200px;
float: left;
background: url(images/winchsidebg.jpg) repeat;
line-height: 2;
font-size: 14px;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
I obviously need to put a conditional comment in there, same for what I did for the minor IE7 tweak, but I'm struggling to suss out what's causing it, I haven't found the specific issue on any of the regular sites (PIE etc). Anyone got any ideas? Centering DIVs inside other DIVs in Firefox? Can it be done in a straight forward way? Setting the inner DIVs float to none seemed to work for IE but not FF. The Example I've read a bunch about how div's won't stretch to accomidate div's inside of them if they overrun the height/min-height set for the container div. How do I get around this? You can see the skeleton of the site above. It's fine unless you resize the window smaller than the content. Alright, I've been working on my own custom border box for a while and I've almost got it, but it has a few problems still. How I do it is I have one div that contains it all (.box) that defines the height and width of the whole box. Then I have three boxRows to lay out the images, and then I define how three cells in each of those rows should behave, very much like how custom borders used to be done with tables. Here are the problems: In both firefox and internet explorer, the bottom row and the far right column actually appear OUTSIDE the .box containing box. There are two additional problems in internet explorer. First, the middle row handles the auto height differently and only expands about 10px instead of the height of the containing box. The second is that the whole middle row for some reason appears to be pushed to the right by about 16px. Any help would be appreciated. Here's the code: HTML: Code: <html> <head> <link rel="stylesheet" type="text/css" href="reset.css" /> <link rel="stylesheet" type="text/css" href="testBox.css"> </head> <body> <div class="box"> <div class="boxRowTop"> <div class="boxCellLeft"></div> <div class="boxCellMiddle"></div> <div class="boxCellRight"></div> </div> <div class="boxRowMiddle"> <div class="boxCellLeft"></div> <div class="boxCellMiddle"></div> <div class="boxCellRight"></div> </div> <div class="boxRowBottom"> <div class="boxCellLeft"></div> <div class="boxCellMiddle"></div> <div class="boxCellRight"></div> </div> </body> </html> And here is the layout css file: Code: /* Box classes */
.box {
background: rgb(120,120,120);
height: 200px;
width: 500px;
}
.boxRowTop {
height: 16px;
position: relative;
width:%100;
}
.boxRowMiddle {
height: auto;
width:%100;
position: relative;
}
.boxRowBottom {
height: 16px;
width:%100;
position: relative;
}
.boxCellLeft {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 16px;
}
.boxCellMiddle {
height: 100%;
margin-left: 16px;
margin-right: 16px;
width: auto;
}
.boxCellRight {
height: 100%;
left: 100%;
position: absolute;
top: 0;
width: 16px;
}
/* Define Cell Backgrounds/Images */
.boxRowTop .boxCellLeft {
background: url(../LandingImages/topleft_circ_corner.png) no-repeat;
}
.boxRowTop .boxCellMiddle {
background: url(../LandingImages/top_border.png) repeat-x;
}
.boxRowTop .boxCellRight {
background: url(../LandingImages/topright_circ_corner.png) no-repeat;
}
.boxRowMiddle .boxCellLeft {
background: url(../LandingImages/left_border.png) repeat-y;
}
.boxRowMiddle .boxCellMiddle {
background: rgb(255,255,255);
}
.boxRowMiddle .boxCellRight {
background: url(../LandingImages/right_border.png) repeat-y;
}
.boxRowBottom .boxCellLeft {
background: url(../LandingImages/bottomleft_circ_corner.png) no-repeat;
}
.boxRowBottom .boxCellMiddle {
background: url(../LandingImages/bottom_border.png) repeat-x;
}
.boxRowBottom .boxCellRight {
background: url(../LandingImages/bottomright_circ_corner.png) no-repeat;
}
And last, the reset CSS, which I don't think has anything to do with the problems because if I take it out it still has them. Code: html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, caption
{
margin:0;
padding:0;
border:0;
vertical-align:baseline;
}
* {font-size:1em; font-family: inherit;}
:focus {outline:none;}
body { font-size: 62.5%; line-height:normal; font-family: Arial, Sans-Serif; color:Black; } /* 62.5% (10px), 75% (12px), 87.5% (14px), 100% (16px) */
p { margin: 0 0 1.2em 0; }
a { color:#ff0000; text-decoration:none; }
a:link { color:#ff0000; text-decoration:nonee; }
a:visited { color:#ff0000; text-decoration:none; }
a:active { color:#ff0000; text-decoration:none; }
a:hover { color:#ff0000; text-decoration:none; }
a.h1,a.h2,a.h3,a.h4,a.h5,a.h6,h1,h2,h3,h4,h5,h6
{
font-weight:bold;
display:block;
text-decoration:none;
color:Black;
}
h1, a.h1, a:link.h1, a:visited.h1, a:active.h1, a:hover.h1 { color:Black; text-decoration:none; font-size: 2.00em; }
h2, a.h2, a:link.h2, a:visited.h2, a:active.h2, a:hover.h2 { color:Black; text-decoration:none; font-size: 1.75em; } /* this is normally skipped? 1.50em */
h3, a.h3, a:link.h3, a:visited.h3, a:active.h3, a:hover.h3 { color:Black; text-decoration:none; font-size: 1.50em; } /* 1.25em */
h4, a.h4, a:link.h4, a:visited.h4, a:active.h4, a:hover.h4 { color:Black; text-decoration:none; font-size: 1.25em; } /* 1.00em */
h5, a.h5, a:link.h5, a:visited.h5, a:active.h5, a:hover.h5 { color:Black; text-decoration:none; font-size: 1.00em; } /* 0.75em */
h6, a.h6, a:link.h6, a:visited.h6, a:active.h6, a:hover.h6 { color:Black; text-decoration:none; font-size: 0.75em; } /* 0.66em WTF? */
fieldset { border:solid 1px; padding:0.25em 0.5em 0.75em; margin: 0 0 1.5em; }
legend { margin:0 0 0 2em; padding:0 1em; }
textarea, input, select { border:solid 1px #ccc; margin:0; padding:0; }
textarea, input { padding:0 .2em; }
input:focus,textarea:focus,select:focus { border:solid 1px black; }
small { font-size:.9em; }
ul, ol, dl { position: relative; padding:0 0 0 1.5em; margin:1.5em 0; }
dir, menu { margin:1.5em 0; }
/* nested lists have no top/bottom margins */
ul ul, ul ol, ul dir, ul menu, ul dl,
ol ul, ol ol, ol dir, ol menu, ol dl,
dl ul, dl ol, dl dir, dl menu, dl dl,
dir ul, dir ol, dir dir, dir menu, dir dl,
menu ul, menu ol, menu dir, menu menu, menu dl
{
margin:0;
padding: 0 0 0 1.5em;
}
hr { margin:0.75em 0; padding:0; }
Any help would be GREATLY appreciated, as I've been working on this for a while! Thanks! I would like to pop up the text, that is, make it bigger when the user hovers on it. but the problem everytime the text gets bigger, the whole row moves and the surrounding texts gets displaced. any idea ? tutorial? let me know if i need to explain more. Good Morning All, Been having a slight problem with the visual in the screenshot below. The blue line is our H2, and the purple one is our H3, however, as you can see, the underline spans the entire width of the column, not just underneith the text, which is our requirement. ***As i am not allowed to upload a url as a new user, the underline is as follows. With the text centre aligned. text ----------------------------------------------------------- rather than text ------ and obviously by the css, the underline on the headers is a small image, repeated - x. Please see relevant css information. * (line 23) { margin-top: 0pt; margin-right: 0pt; margin-bottom: 0pt; margin-left: 0pt; padding-top: 0pt; padding-right: 0pt; padding-bottom: 0pt; padding-left: 0pt; } h2, h3, h4, h5, h6 (line 101) { font-size: 1.2em; font-weight: normal; padding-bottom: 4px; margin-top: 0.6em; margin-right: 0pt; margin-bottom: 0.8em; margin-left: 0pt; text-align: center; } .contentArea h2, #secondaryNavigation h2 (line 114) { background-color: transparent; background-image: url("../images/h2_gradient_bg.gif"); background-repeat: repeat-x; background-attachment: scroll; background-position: left bottom; color: #0066cc; } Many Thanks in advance. Marc. http://www.detroitnewspapers.com/dnp-company.html In IE for windows, the left column (with the gradient) has about a 10px gap between it and the horizontal dark blue bar. This gap doesn't show up on Safari or Firefox (mac), so I'm not sure why it's showing up in IE Windows. I believe it has something to do with the flash div, but I'm a newbie at table-less layouts. Any insight would be much appreciated! if I have a main div that is 790 px wide, how can I have 6 divs floating inline that all are equal in width and take up all the space? I've tried to set the width and there is always a space at the right end. When it looks like I have 5 px leftover and bump up the width by 1 px, adding that to six divs makes the last one drop down. any tutorials or ideas would be great. Thanks, Scott In IE my center div is even with the rest of the columns. in ff it is not. why? My style sheet does not specify a top-margin to be anything other than default ... http://www.nevertap.com/event.php Hi All, I am trying to get to grips with css positioning and am hitting problems. The code below is my complete page (inc css). I am trying to get the 3 divs - leftbox, middlebox and rightbox to sit alongside each other with 5px gaps and all 3 being vertically aligned 5px below the frontsplash div. 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" lang="en" xml:lang="en">
<head>
<title></title>
<style type="text/css">
#header {
background-color: #80724d;
height: 70px;
width: 790px;
border-bottom: 1px solid #fff;
}
#navbar {
background-color: #d5c8a4;
height: 25px;
width: 790px;
top: 70px;
border-bottom: 1px solid #fff;
}
#frontsplash {
background-color: #fbf8ef;
width: 500px;
margin: 5px;
padding-left: 10px;
padding-bottom: 10px;
}
#frontboxcontainer {
}
#threeboxes {
display: block;
}
#leftbox {
float: left;
background-color: #d5c8a4;
width: 200px;
padding-left: 5px;
}
#middlebox {
top: 0px;
background-color: #d5c8a4;
margin: 210px;
width: 100px;
padding-left: 5px;
}
#rightbox {
top 0px;
background: #d5c8a4;
width: 100px;
margin: 310px;
}
h1 {
font-family: "Times New Roman", serif;
font-size: 24px;
color: #80724d;
padding: 0px;
}
h2 {
font-family: "Times New Roman", serif;
font-size: 14px;
color: #80724d;
padding: 0px;
}
p {
font-family: "Times New Roman", serif;
font-size: 14px;
color: #323232;
}
#navbar ul {
margin:0;
padding:0;
list-style:none;
}
#navbar li {
float:left;
margin:0;
padding:0;
border-right: 1px solid #fff;
}
#navbar a {
display:block;
padding:0px 10px;
}
</style>
</head>
<body>
<div id="header">
Site Name
</div>
<div id="navbar">
<ul>
<li> <a href="#">Home</a> </li>
<li> <a href="#">About</a> </li>
<li> <a href="#">Downloads</a> </li>
<li> <a href="#">Documentation</a> </li>
<li> <a href="#">Contributing</a> </li>
</ul>
</div>
<div id="frontboxcontainer">
<div id="frontsplash">
<h1>This is the title ... </h1>
<p>This is the introductory text This is the introductory text This is the introductory text
This is the introductory text This is the introductory text This is the introductory text
</p>
</div>
<div id="threeboxes">
<div id="leftbox">
<h2>DEMONSTRATION</h2>
<p> A fully functional demo of the
application is available online
</p>
</div>
<div id="middlebox">
<h2>SUPPORT US</h2>
<p>Why not donate to help keep
the project alive?
</p>
</div>
<div id="rightbox">
<h2>SERVICES</h2>
<p>Professional services available
with the application.
</p>
</div>
</div>
</div>
</body>
</html>
It has all gone pear shaped..... any ideas? Thanks. |
|||||||