|
CSS - Prevent Image From Starting New Line
Hello all,
I am dynamicly creating a table with the following structu Code:
<table id="plate_header">
<tr>
<th><a class="header_link" href="link">Header 1<img src="arrow"></a></th>
<th><a class="header_link" href="link">Header 2</a></th>
<th><a class="header_link" href="link">Header 3</a></th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</table>
with the following CSS: Code:
table {
padding: 1em;
border: 1px solid #dddddd;
} /* end table */
.cell { border: 1px solid #dddddd; }
td { padding: 1em; }
th {
background: #206296;
padding: 0 1em;
font-weight: bold;
color: #ffffff;
}
a:link.header_link,
a:hover.header_link,
a:active.header_link,
a:visited.header_link { color: #ffffff; }
#plate_table td { vertical-align: top; }
The problem is in some cases, the <th> is the largest item in that column. So whenever the arrow image appears with it, it will be placed on a new line. How can I force it to be on the same line as the text? Similar TutorialsI have a few div on my page and the ones that have long lines or URL's are expanding width-wise. Code: <div style="width: 300px;">MyVeryLongLineThatCanAndMostLikelyContainsURLs</div> I would like that the div keeps the same width, as the height is not a problem as the div contains other text, causing it to grow downwards anyway, and allow the line to break up with out causing any possible hyperlinks that are in the text to fail if clicked. what happens is that the div grow wider to allow the long line to show inside. The physical appearance and layout has already been determinted. I must now make it into a webpage that looks like the design. I know how to do it with tables but I am trying todo it tableless and I am having some problems - because this is my first attempt at it - yes I know I am old school - but I am trying to become new school. Here is the link to the design I have the box for the web page and trying to get the logo image to show up properly in the top right corner and the tag line to show up next to it. I don't know how to do the code box thing - but here is my html: <body> <div id="page"> <div id="header"></div> <div id="tagline">world leaders in spirometry</div> </div> </body> Here is my css: body { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; text-align: left; background-color: #ffffff; color: #000000; margin-top: 11px; padding: 0; } /*page settings*/ #page { width: 750px; height: 600px; border: 1px solid #5094F9; background-color: #FFFFFF; color: inherit; text-align: left; overflow: hidden; margin: 0 auto; padding: 10px 10px 10px 10px; align: center; } #header { background-image: url(../images/vitalograph_spirometers_logo.gif); background-color: inherit; background-position: "top left"; background-attachment: fixed; background-repeat: no-repeat; padding: 10px 10px 10px 10px; overflow: inherit; } #tagline { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 14px; font-style: italic; color: #5094F9; display: inline; } Any help is greatly appreciated - and if you could tell me how to do the code ting properly that woud be great - I tried the wrap code # icon, but it only pasted one tag not the whole string. Thanks! I have tried embedding the div tags with no luck and even having the text be defined in the heading id and trying to define it there - but it still doesn't look right. Here is my code: I am new to xhtml and am working on my web page i want to use a graphic to split my different areas and the book i was using only showed how to put in a plain line, In .css PHP Code: h2 {border-top:1px solid #4D65A0} I have found a graphic i want to use from the animation factory cd's i have and now im lost as to how to put it in. new line: slash_blue_mw.gif sorry posted in the wrong spot b4 hi, this is my first post so go easy with me! I am trying to use css to make a top navigation bar, with an image to the left and an ul to the right, i want to ul to be in line with the bottom of the image so that it forms a nav bar but i am doing something wrong...! below is what i think is the relevant code and css.... any help appreciated!! If i need to upload the rest of the pages then let me know. i'm coding in php but this bit is all html so i guess that doesnt really matter for now, i'm new to web development, its part of a uni assignment! Code: HTML <div id="header"> <p align="left"> <a href="index.php"> <img src="/images/GATlogo.jpg" width="150" height="150" alt="Home" border="0" /></a> <ul> <li><strong><?php echo "$heading"; ?></strong></li> <li><img src="/images/login.gif" border="0"/><a href=" Login.php">Login</a></li> <li><img src="/images/register.gif" border="0"/><a href=" Register.php">Register</a></li> </ul> </div> Code: CSS #header{
vertical-align: top;
text-align: right;
border: solid thin #999999;
margin: 0px 0px 0px 0px;
background: #336699;
font-family: MS Trebuchet, MS Verdana, Univers, Helvetica, Arial, sans-serif;
color: #ffffff;
height: 155px;
}
#header li {
display: inline;
list-style: none;
padding: 40px;
}
#header a:link {
color: #ffffff;
text-decoration: none;
}
#header a:visited {
color: #ffffff;
text-decoration: none;
}
#header a:hover {
color: #ffffff;
text-decoration: none;
}
#header a:active {
color: #ffffff;
text-decoration: none;
}
I have a menu within my content thus: Code: div class="contentMenu"> <ul> <li> <a href="#" title="Find out more"><img src="images/stories/memories/FamilyLife/thumb/familyFWHarveysBuildingsDorchester.jpg" alt="" /> <span>Family life</span></a> </li> . . . <li> <a href="#" title="Find out more"><img src="images/stories/memories/SightsAndSounds/thumb/sightsMOOsmington1963.jpg" alt="" /> <span>Sights/Sounds</span></a> </li> </ul> </div> I want the menu items not to spill onto the next line when I shrink the browser. I have tried overflow:hidden; but does not stop the last one taking up a new "line". There are 7 menu items across the page. The CSS so far is: Code: .contentMenu {
background-color:#FFFFCC;
border:1px solid #B9C0F7;
margin-bottom:6px;
padding:8px 0 5px;
}
#main .contentMenu ul, #main2 .contentMenu ul {
margin:0 auto;
overflow:hidden;
width:95%;
}
#main ul, #main2 ul {
list-style-position:outside;
list-style-type:square;
margin:0 0 0 20px;
padding:10px 0;
}
#main ul li, #main2 ul li {
margin:0;
padding:0 0 0 10px;
}
.contentMenu li {
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
text-align:center;
width:15%;
}
.contentMenu a {
padding-top:4px;
text-decoration:none;
}
.contentMenu img {
border:medium none;
height:62px;
width:55px;
}
Of course the meni images need to be evenly spaced across the page. Would appreciate if someone could point me in the right direction. Hi. I'm reasonably new to tableless-design, and i've run into the common problem of aligning one bit of text to the left of a line and another to the right. I have searched the web and have found several means of achieving this, but in my case there is an image combined with a inline list (horizontal menu) that needs to be aligned left, and another combination of text and images to the right. | [image] text .... right-side text | This might seem rather simple, but it becomes more complicated: the entire block needs to be padded on the top in order for the text not to appear cramped up at the top, and the left-margin and right-margin of the image is then set to the corresponding negative values in order for it to still be displayed precisely in the top left corner. I have found this to be the only cross-browser compatible method. All the methods I have experimented with to align the two sides on left and right have either resulted in the image and text to be incorrectly (vertically) aligned or be displayed in different lines, even when the image is not used as part of the alignment-method. Any help or suggestions will be greatly appreciated. Thanx Yeah so I am trying to get the main structure of a site set up and I am struggling mightily with the CSS. I'm simply trying to layout the page with: four divisions: 3 vertical and one horizontal There is a 10px space between top bottom left and right. My problem at the moment is fitting the horizontal division correctly... Here is the css... all divs are nested inside a wrapper div... Code: @CHARSET "UTF-8";
.wrapper{
position: relative;
float: lt;
left: 0px;
width: 100%
margin-bottom: 10px;
padding-right:0px;
margin-right:0px;
background-color: #221526;
}
.left1{
position: relative;
float: left;
left: 10px;
width: 10%;
height: 415px;
background-color: #2C1D30
}
.left2{
position: relative;
float: left;
left: 1px;
width: 80%;
height: 415px;
background-color: #2C1D30
}
.right{
position: relative;
float: right;
right: 10px;
width: 10%;
height: 415px;
background-color: #2C1D30;}
.bottom1{
position: relative;
float:none;
top:415px;
left:10px;
background-color:#2c1d30;
width: 1375px;
right: 10px;
height: 140px;
}
body {
border-width: 0px;
padding: 0px;
margin: 0px;
font-size: 90%;
background-color: #221526
And if I'm approaching the coding in unadvisable ways (using % for example) please let me know... Thanks for the help. I put a fairly large image and centered it using. Code: background: #484747 url(img/main.png) fixed; background-repeat: no-repeat; background-position: center; That put it exactly in the center in all browsers (that I have). So working great so far. I then want to load a button on top of that image (like just a button) that says "Enter" So I make a button and I go through everything until I choose absolute and giving it percents to be exactly where I want it. I refresh the page and boom its there, I move the webbrowser height, use a different browser and its broken badly. What do people recommend using? Like relative and padding or what? Since what I'm using right now only works for my setup. I've done a lot of reading to recently learn css, but this one stumps me: I have put the one background image in the center of the page so that it looks better than being crammed in the upper left, and to keep a nice layout regardless of screen resolution. so now i want to add a text element that fits into the right place relative to the background, not the page. can i set a point (such as top-center) that all margins will be based on, besides the top and left of the browser page? the non css version of the page (with lots of tables) is at www.stipepainting.com. looking at that might clarify my question a bit. thx in advance Greetings, I will preface this by saying that I know this is very poor design but I have been given the mandate from above and must obey... Our web application has many elements that are generated dynamically by the server. Each of these dynamic elements is rendered with an ID attribute whose value is also generated by the server. So there may be 3 form fields that are rendered as such: html4strict Code: Original - html4strict Code <div id="_ctl0_mContentPlaceHolder_Masterfield24" class="cCustomField"> <input type="text" id="someId" /> </div> <div id="_ctl0_mContentPlaceHolder_Masterfield25" class="cCustomField"> <input type="text" id="someOtherId" /> </div> <div id="_ctl0_mContentPlaceHolder_Masterfield26" class="cCustomField"> <input type="text" id="lastId" /> </div>
At design time, all 3 of these fields were intended to display identically/consistently. For this reason using class="cCustomField" was sufficient. Now a bigger customer is demanding that each field have a different look. We do not have the time for a new build of the application so we are limited to making changes to the CSS file only. Under normal circumstances, to change the background color of the text input's container, I would do something like this: Code: #_ctl0_mContentPlaceHolder_Masterfield24 {
background-color: #666;
}
The problem here is that the value of the ID attribute for that element begins with an underscore and is thus ignored (by IE) in the CSS. I tried escaping the underscore in the CSS with Code: #\_ctl0_mContentPlaceHolder_Masterfield24 {
background-color: #666;
}
and Code: #\5fctl0_mContentPlaceHolder_Masterfield24 {
background-color: #666;
}
to no avail. Can anyone think of any other approaches I may take to modify an element's CSS properties, via an external stylesheet, when that element's ID is not a valid CSS selector? I've got two lines of text. Want the spacing the two lines to increase, so I set a line-height. When I do this, not only does it increase space between the two lines, it also increases spacing above the first line (and maybe below the second). How can I increase spacing between the two lines only, without increasing above and below? Thanks! Greetings, I have a class called "header" and I am trying to give it a touch of extra space between it and the next line. All of my headers are just a few words and thus on one line. I tried placing "line-height: 1.5em" in my "header" class and it shows up correctly in Dreamweaver but not in IE. My thought is, because it is only a single line, that class value does not kick in because there is no second line for that class. Is there a way to conrol this in CSS or am I going to have to resort to using a....gulp.....spacer? Thanks in advance! Greetings, I am relatively new to CSS and am using background image bullets. Problem is, in the case of a two line link, the bullet aligns in between the two lines and I need it to align to the top line. Below is the CSS, and attached is a screenshot of the link to better illustrate my predicament. Thanks for any help! li { list-style-type: none; background: url(../images/bullet.gif) no-repeat left; padding: 0 0 0 10px; } Hi all, I am trying to automate everything on my test website and I have one more angle to cover. In effect, I want to adjust the line-height property (which I can do) based on the number of files within a specific folder (PHP and already done). The more files in the folder, the lower the line-height value must be. This is to ensure if I copy additional files into the folder, then the navigation menu (which is PHP reading files in this particular folder) will alter the CSS line-height property accordingly to ensure it can never exceed a certain height. Sounds wierd? go to www.re3.org.uk (next to the RE3 image, I have a list of hyperlinks which are obtained from files within the folder) My problem, when adjusting the CSS property (which is set as cm in *.css file) in javascript, it doesn't correspond correctly, the line-height property in javascript doesn't appear to be work in cm but some other measurement. Does anyone know how to change what unit of measurement Javascript works in? Or does anyone know what unit of measurement javascript uses when adjusting line-height / line-width values? I want to create a mini-algorithm that works out the appropriate line-height based on the image height (got that already) and the number of files in the folder (got that too) so the menu automatically adjusts to fit. Whew! I have a table that uses style sheets: <table class="Border"> but then when I place a table inside of it, it inherits the same class. Is there a way to prevent this? Thanks! Scott. I'm working with a portal system where-in various different modules can be applied to the main system. The problem I'm running into is when I want a module to have complete reign over it's appearance, completely ignoring the pre-set design of the surrounding system. Is there a CSS tag hiding somewhere that can disable all inheritance from the parent on up? I understand that styles declared closer to the output will take precidence, but I also don't feel like modifying the current and very complex stylesheet of a module I'm porting to make sure every attribute of every tag is being set to something compatible. Surely there must be a way to disable inheritance for a block...? I've got a side navigation that displays correctly in every browser EXCEPT IE 6. Big shock... I want the navigation DIV to only be as wide as the content inside it. It does this in IE7, FF, Safari, etc. Any help would be greatly appreciated. The CSS: Code: #nav { background-color: #fff; width: 218px; height: 400px; float: left }
#menuContainer { margin-top: 120px; margin-left: 12px; position: fixed }
#menuContainer h3 { font-size: 11px; font-weight: 900; text-transform: uppercase; margin: 0 0 4px }
.menu { list-style: none; margin: 0; padding: 6px 0; border-top: 1px dashed; border-bottom: 1px dashed }
.menu li { font-size: 20px; font-weight: 900; text-align: right; text-transform: uppercase; margin: 3px 0; padding: 0 }
.menu a { color: #000; text-decoration: none }
.menu a:hover {}
.menu ul { list-style: none; margin: 0; padding: 0 }
.menu ul li { font-size: 12px; font-weight: bold; line-height: 14px; text-transform: lowercase; margin: 0; padding: 0 }
.menu ul a { color: #c00 }
.menu ul a:hover { color: #000 }
And the HTML: Code: <div id="nav"> <div id="menuContainer"> <h3>Site Name</h3> <ul class="menu"> <li><a href="...">Page</a></li> <li><a href="...">Page</a></li> <li><a href="#">Page</a> <ul> <li><a href="...">Page</a></li> <li><a href="...">Page</a></li> <li><a href="...">Page</a></li> <li><a href="...">Page</a></li> </ul> </li> <li><a href="...">Page</a></li> <li><a href="#">Page</a> <ul> <li><a href="...">Page</a></li> <li><a href="...">Page</a></li> </ul> </li> <li><a href="...">Page</a></li> </ul> </div> </div> This is a simple question. In my menu system, I want my "items" to look like links. I've put the text in an Anchor tag... but I then get the, for this time at least, undesired blue underline action going on... What CSS do I need to use to prevent this. I want my <div> tag and/or my <a> tags to not change... Thanks. Hello, I'm really bad with CSS, so this probably a simple question. I've found some stuff on the 'net about how to set up a class to prevent <body> from printing, but I just want to prevent one table element from printing while still allowing everything else. Example - on print, allow First Name but do NOT print SSN: Code: <table> <tr> <td> First Name </td> <td> SSN </td> </tr> </table> |
|||||||