|
CSS - Container Won't Change Size (without Breaking)
http://cad-design-engineering.com/New
I double checked, and this page validates. (CSS and XHTML) The gray background on the right hand side - I can't adjust the width. When I do get a change, it breaks something - the links panel shifts to the bottom of the screen. Code:
#container
{
width: 737px;
height: 1%;
overflow: visible;
float: left;
padding: 4px 0 0 0;
margin-right: -185px;
}
This is the output from the Firefox Web Developer plugin: Code:
#container (line 147)
{
width: 737px;
height: 1%;
overflow: visible;
float: left;
padding-top: 4px;
padding-right-value: 0pt;
padding-bottom: 0pt;
padding-left-value: 0pt;
padding-left-ltr-source: physical;
padding-left-rtl-source: physical;
padding-right-ltr-source: physical;
padding-right-rtl-source: physical;
margin-right-value: -185px;
margin-right-ltr-source: physical;
margin-right-rtl-source: physical;
}
Not sure what I'm doing wrong. I've been perplexed for several days on this one. Thank you. Similar TutorialsCode: <div class="container"> <div>Booya</div> </div> Code:
.container {
position: relative;
}
.container div {
position: absolute;
bottom: 0;
right: 0;
}
Is there any way to position the nested div relative to its grandparent vs. its parent without losing the relative positioning, or is JS the only option? I'm creating a blog for someone, and my issue resides in <h2>. Using Wordpress, <h2> is typically the blog entry title. As you know, blog entry titles vary, because people put in different titles for different entries. I have <h2> formatted to my friend's likings, but an issue has arisen. If a blog entry title is particularly longer than the average, <h2> breaks into another line of text. This results in corrupting the layout entirely. So my question: How do I go about formatting <h2> so that the blog entry title text fills up the entire width of <h2> without breaking into a new line? Clarification (if needed): I want the font size to be dependent upon the physical length of text in the blog title Here's my code for <h2>. It resides in two containers of sorts. Code: h2
{
float:left;
font-family:"Franklin Gothic Medium";
font-size:55px;letter-spacing:-2px;
width:728px;
padding: 0;
margin: 0;
}
This is my first post/topic. Be gentle! Thanks. Thanks for taking the time to read my question. I have a container that has a bunch of stuff in it. In IE the container grows (I know it shouldn't) with the content. FF the content doesn't. I want to use the same container on each page in my site, but each page will have different amounts of content making the page longer or shorter. I need the container to match the contents, and I would like to do it without making duplicates of the container in the CSS and changing only the height. For an example check out warrenpersowich.com Look at the home page and the Seminars page. See how the content is differen, but the container is the same. Thanks, Brad Hi; why my container display different of size from different computer? In my computer, i can see the whole container(even i use different browser), but in some computer, just can see the part of the container, could anyone can help me, please. PHP Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <META HTTP-EQUIV="content-type" CONTENT="text/html; charset=utf-8"> <style type="text/css"> html head{ border:0; padding:0; margin:0; } body{ padding:0; border:0; margin:0; background-color:#CCCCCC; } #container { position: relative; width:1200px; height:750px; border:0; padding: 0; margin-top:40px; margin-bottom:auto; margin-left:auto; margin-right:auto; background-color:#FFFFFF; } </style> </head> <body> <div id="container"> The new Prime Minister's personal support is still firming though. Polling of 1500 people by Auspoll early last week showed she has a 45 per cent approval rating, an 18 per cent disapproval rating and a whopping 37 per cent have reserved their judgment. The polling was taken before the asylum issue blew up in the Government's face. Labor's election planning has been brought forward by the rise of Ms Gillard as leader. A senior Labor source confirmed last week that former prime minister Kevin Rudd had been planning a late election, which was expected in about October. Among a series of announcements last week that have been widely interpreted as a clearing of the decks was a decision to axe the Green Loans program and put the Government's controversial internet filter on hold for a year. Even on social issues Ms Gillard appears to be travelling well. Her much publicised early admission that she does not believe in God is not troubling many voters. The Auspoll survey found that having an atheist Prime Minister was of no consequence to 62 per cent of people, 20 per cent said they actively support a PM who does not believe in God while less than 18 per cent were opposed. </div> </body> </html> Thanks for taking the time to read my question. I have a container in which I have a link. I would like to change the color of the container when the user hovers over the link. Can I do that? I can make the background of the text change, but the container is wider than the text. HTML: Code: <div id="LinkBox" class="LB1"><a class="LinkBoxLink" href="#">Link #1</a></div> CSS: Code: #LinkBox {
float: right;
height: 20px;
margin-bottom: 15px;
border-color: gainsboro;
border-width: 1px;
border-style: solid;
text-align: center;
}
.LB1 {
width: 241px;
}
a.LinkBoxLink:link {
text-decoration: none;
color: black;
}
a.LinkBoxLink:visited {
text-decoration: none;
color: black;
}
a.LinkBoxLink:hover {
background-color: red;
color: yellow;
}
a.LinkBoxLink:active {
text-decoration: none;
}
Thanks again for your help. Brad <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- div.print { font-family: Arial, Helvetica, sans-serif; font-size: 2pt; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; text-transform: none; color: #FF3300; letter-spacing: normal; word-spacing: normal; } div.regular{ font-family: "Times New Roman", Times, serif; font-size: larger; font-style: normal; line-height: normal; font-weight: bold; font-variant: normal; text-transform: none; color:#006600; letter-spacing: normal; word-spacing: normal; text-decoration: underline; } --> </style> <script language="JavaScript"> function printerFriendly() { document.getElementById('div1').className = 'print'; } </script> </head> <body> <p><a href="javascriptrinterFriendly()">click here to change font</a></p> <div id="div1" class="regular"> <table id="tab1" width="100%" border="0" cellspacing="1" cellpadding="1"> <tr> <td>bla</td> <td>kla</td> <td>sal</td> <td>kdef</td> </tr> <tr> <td>iuwhdfqower</td> <td>ouresgopu</td> <td>uihwdrfpu</td> <td>uiwrhgfpuieroi</td> </tr> <tr> <td>oiiudefpuiwerv</td> <td>iufdgpiuwqerpoi</td> <td>iuergpuergipou</td> <td> </td> </tr> </table> <p class="print"> </p> </div> </body> </html> why is the font size not changing nor the color?? only the font changes when th link is clicked?? Hi all, I am having a bear of a time trying to modify the size of a checkbox element in a form under IE Windows. For all other browsers on the Mac and Windows I use the following style sheet settings: PHP Code: input[type=checkbox] { font-size: 9px; margin: 0px 0px 0px 0px;} I have also tried coding a "style" attribute directly on the <input type=checkbox"...> element in my HTML code but to no avail! Does anyone know how the heck to do this? I am creating a website that uses English and Japanese characters. The default font size I use for English characters displays the Japanese characters too small. I would like the Japanese characters to display in a certain size whenever and wherever they appear. I can't simply use classes because I have English and Japanese appearing in the same elements a lot of the time. Any help would be greatly appreciated. Thank you. I'm trying to resize links on hover but doing so they change their vertical alignment during hover. Is there a way to prevent this ? Basically I just want the text to be bottom aligned and stay that way on hover. "text-align: top" works, but thats not what I want. simple example: CSS: Code:
a:link, a:visited, a:active {
font-size: 1em;
}
a:hover {
font-size: 1.5em;
}
HTML: Code:
<div>
<a href="#">Text</a>
</div>
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. Hi There - Have a simple container div containing two other divs, top and content. My problem is that I can't get the colorboxtop to stick to the top of its container. There's a wayward space. Can't find any stray margins or padding hanging around. Perhaps fresh eyes can see what I cannot. Please let me know. Any help you can give me would be greatly appreciated. Thanks! Code:
<body>
<div class="colorbox">
<div class="colorboxtop">
<h2>title goes here</h2>
</div><!-- /colorboxtop -->
<div class="boxcontent">
<p>You should read this and <a href="#">Click Here</a>.</p>
<a title="Go Here!" href="#">[button]</a>
</div><!-- /boxcontent -->
</div><!-- /colorbox -->
</body>
No great complexity there...here's the CSS: Code:
body {
color:#666666;
font-family:Lucida Grande,Verdana,sans;
font-size:10px;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:13px;
}
.colorbox {
margin-bottom:9px;
padding-bottom:15px;
width:300px;
border:thin solid #CCCCCC;
}
.colorbox h2 {
color:#FFCC33;
}
.colorbox {
color:#CC6633;
padding:0px 20px 15px;
margin-top:0;
margin-bottom:10px;
}
.colorboxtop {
background-color: #dddddd;
height:50px;
color:#666666;
background-image: url(images/bg_Tiles/stripe-dk-blue-green.png);
padding:auto 20px;
}
.colorbox a {
color:#C5DBE9;
font-weight:bold;
text-decoration:none;
}
Hello there, first post, just need a quick fix. Hope you don't mind. So I'm trying to make myself a new portfolio site, but there's this 'error' I can't seem to fix... (Can't post a link in my first post, so just copy/paste "hellspike.thanez.org/newsite" in the addybar.) Basically that 150*300 infobar is supposed to be right next to the image, but it always ends up above or below the container. <!--AK47--> <div id="imgcont0"> <div id="imgcont1"><img src="images/ak47/1.jpg"></div> <div id="imgcont2"><img src="images/ak47/info.jpg"></div> </div> <!--/AK47--> imgcont0 is a 825*300 container, in which imcont1 (render) and 2 (infobar) are supposed to be. Stylesheet: #imgcont0 { width: 825px; height: 300px; margin-left: auto; margin-right: auto; } #imgcont1 { width: 650px; } #imgcont2 { margin-left: 675px; width: 150px; } As you see the code is simple, yet I can't seem to fix this problem. Ideas? Hi there, I'm completely new to CSS. I'm trying to do this more than one hour but can't get it right. Code: <font color='white'><font size='1' face=verdana size=1> I couldn't find the equivalent of this in CSS This is my last experiment but it doesn't seem to work either Code: fontstyle { color : #FFFFFF; font-family : verdana ; font-size :1;}
Thanks I could see this as potentially being really easy to do or really hard to do. I'm hoping for the former. Suppose I have 3 divs, A, B, C and that I want the total width of A + B + C to equal the width of the screen. Suppose also that I want them to be inline. How can I have B to be a fixed width while A and C expand depending on the screen width (such that the width of A = the width of C)? So when using Netscape 7.2 & Opera 7.5 and MSIE 6.0, How do you get a simple tag like body { font-size:small; } to be equal in all browsers? Setting IE Text Size to Medium, and Opera's Zoom to 100% (both defaults) and Netscape 7.2 to 120% (not the default) is one way, but is there a CSS way? By the way, the child element hack "body>div {property}" wasn't working no matter what I tried, by not working I mean to say Netscape never would read it or apply it. It appeared to be that Opera & IE need to read the same value while Netscape needs to apply a larger size to be equal to IE's and Opera's rendering. B Just when you thought you got everything under control, something backfires.. lol Please see acengage.com and try the Reach Us tab under IE 7.0 - and you'd see a broken tab with a line underneath. I have tried every sane CSS maneuver to fix it, but in vain. Any help would be greatly appreciated! Thanks in advance! I have this page: http://www.taleria.net/ken/ It looks beautiful in Firefox but in IE only the page background shows up. If I comment out the entire CSS file the page shows up in IE so it's obviously a problem with my CSS code - but I don't know where the problem is. Any pointers would be appreciated: Code:
<style type="text/css">
<!--
body
{
background: url(http://www.taleria.net/ken/images/bg2.jpg) repeat-x left top;
font-family: arial;
}
td
{
font-family: arial;
font-size: 13px;
}
.navfont
{
font-variant: small-caps;
font-weight: bold;
color: black;
}
a.navfont
{
color: black;
text-decoration: none;
}
.main_heading
{
font-variant: small-caps;
font-weight: bold;
font-size: 14px;
color: #000033;
}
.bodytable
{
background: url(http://www.taleria.net/ken/images/headingbg.jpg) repeat-x left top;
}
a
{
color: #393d5a;
}
/************************/
/* BEGIN SUCKERFISH*/
/************************/
ul.menu {
list-style: none;
padding: 0;
margin: 0;
}
#nav a {
font-weight: bold;
color: black;
}
#nav a {
text-decoration: none;
}
#nav li li a {
display: block;
font-weight: normal;
color: black;
padding: 0.2em 10px;
}
#nav li li a:hover {
padding: 0.2em 5px;
border: 5px solid #393d5a;
border-width: 0 5px;
}
#nav li {
float: left;
position: relative;
cursor: default;
background-color: white;
padding-right: 1.2em;
}
#nav li#first
{
padding-right: 1.2em;
}
#nav li#last
{
padding-left: 1.2em;
padding-right: 0;
}
#nav li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
font-weight: normal;
background: url(http://www.taleria.net/ken/images/ddbg3.gif) bottom left no-repeat;
padding: 0.5em 0 1em 0;
border-right: solid 1px #393d5a;
}
#nav li>ul {
top: auto;
left: auto;
}
#nav li li {
display: block;
float: none;
background-color: transparent;
background-image: none;
border: 0;
}
#nav li:hover ul, li.over ul {
display: block;
}
/************************/
/* END SUCKERFISH*/
/************************/
</style>
I have customised an open source wordpress template for my website and somewhere along the line seem to have broken the navigation as it appears in IE6,7,8. I use a mac so I didn't identify the problem straight away and I'm not sure how to fix it. I can work my way around CSS usually but I find navigation very difficult to grasp and so any help would be very much appreciated. blackmarlinfishingblog.com Problem: The child items of the navigation (drop downs) are appearing under the slideshow so you can't click on them. Thanks again in advance for any help you may be able to give! ok this isnt so much a need for code, more an need for information. I have worked out how to page break Code: <STYLE TYPE="text/css">
H2 {
page-break-befo always
}
</STYLE>
<div class="H2"> </div>
I am assuming this is right, as the page will always break after the <div> But I would like to know how much success people have had with this? I have tried using it and it doesnt seem to work on IE 6.0. Any luck with any other browsers? I am just wondering whether im doing it wrong or it isnt supported fully yet. I recently inherited an application that, in my opinion, is poorly written. It relies heavily on tables, like so: Code: ... <table> <tr> <td>Error:</td> <td> <table> <tr> <td>P</td><td>a</td><td>g</td><td>e</td><td> </td><td>N</td><td>o</td><td>t</td><td> </td><td>F</td><td>o</td>u</td><td>n</td><td>d</td> </tr> </table> </td> </tr> </table> ... I kid you not. It's horrible but it can't be re-written *yet*. It will be rewritten around October. But there's a problem I'm dealing with now that I am hoping is possible. I have a feeling it isn't because it's logically impossible (even if it may be practically possible. I'm writing some CSS for a media="print" layout. There is so much garbage in some of these table cells, that I'm finding it so much easier to hide the entire cell. For example, there is a page header that has a lot of junk in it that won't be on a print out. But there is one <div> inside that header that we would like. Is it possible to display an element that is nested deep down inside an element that's hidden? It's a div inside a table cell inside a table cell inside a table cell. The top level cell is hidden, but I'd like to stylize the div. I know it makes no sense logically - a hidden element's children should all be hidden too. But practically, I'm wondering if it's possible to break away from the HTML's heirarchy with CSS. Any suggestions (other than "rewrite the app") are appreciated. |
|||||||