|
CSS - Positioning Text In Textfield
My problem is with 2 textfields that I am using css to text attributes, all is well in IE, but in netscape and firefox the letters q,y,p the bottoms get cut off. Any suggestions greatly appreciated.
here is a link to the page i am working on http://www.cfwilson.com/365c/index.htm Charles Similar TutorialsI am trying to construct a site using a complete de-coupled design. My problem concerns some absolute positioned textfields. I do not wish to use a table to display the form, as this would defeat the whole purpose of the project. The page in question can be found here The CSS is as follows (exmaple of the name header and text field Code: /* Contact Form Positioning */
.NameFormTitle
{
position: absolute;
left: 15px;
top: 110px;
display: inline;
}
#NameFormField
{
position: absolute;
left: 120px;
top: 110px;
display: inline;
font-family: Arial, sans-serif;
color: #999999;
font-weight: bold;
line-height: 100px;
}
In IE 6 all is well. The textfield is the same height as the header, in Firefox and Netscape the textfields are to high. I have tried line height, but as the elements are absoluted positioned this has no effect (I think). Please help Hi Everyone, I have a problem trying to position a submit button on a search form. The button is an image saying "go" and I am trying to move the button down by a few pixels using CSS. Whenever I use margin-top:3px; the textfield is also moved down although I am using a class on the button of "goButton" (see code below). I want to be able to move the button only. CSS code: Code: #searchField {display:inline;}
#goButton {display:inline; margin-top:3px;}
.goButton {margin-top:3px;}
HTML/PHP code: Code: $output = '<div id="searchField"><span class="white">Search</span><input name="searchword" id="mod_search_searchword" maxlength="20" alt="search" class="inputbox'. $moduleclass_sfx .'" type="text" size="'. $width .'" value="'. $text .'" onblur="if(this.value==\'\') this.value=\''. $text .'\';" onfocus="if(this.value==\''. $text .'\') this.value=\'\';" /></div>';
if ( $button ) {
$button = '<div id="goButton"><A HREF="javascript:document.searchForm.submit()"
onmouseover="document.searchForm.go_but.src=\'/silence/templates/rhuk_solarflare_ii/images/goOver.gif\'"
onmouseout="document.searchForm.go_but.src=\'/silence/templates/rhuk_solarflare_ii/images/go.gif\'"
onclick="return val_form_this_page()">
<IMG SRC="/silence/templates/rhuk_solarflare_ii/images/go.gif"
WIDTH="19" HEIGHT="19" BORDER="0" ALT="Go"
NAME="go_but" class="goButton"></A></div>';
}
Full CSS code: Code: html, body {margin: 0; padding: 0; border: 0;}
html {
height: 100%;
}
body {
color: #5f5c5c;
background-color: #8091b4;
font-family: verdana, sans-serif;
font-size: 80%;
text-align: center;
margin: 10px 0;
line-height: 130%;
height: 100%;
margin-bottom: 1px;
font-size:10px; /*added to change all font sizes*/
}
.clr {
clear: both;
}
.outline {
border: 1px solid #cccccc;
background: #ffffff;
padding: 2px;
}
#buttons_outer {
width: 635px;
margin-bottom: 2px;
margin-right: 2px;
float: left;
}
#buttons_inner {
border: 1px solid #cccccc;
height: 21px !important;
height: 23px;
}
#pathway_text {
overflow: hidden;
display: block;
height: 25px;
line-height: 25px !important;
line-height: 22px;
padding-left: 4px;
border: 1px solid #ccc;
margin-bottom: 2px;
}
#pathway_text img {
margin-left: 5px;
margin-right: 5px;
margin-top: 6px;
}
#buttons {
float: left;
margin: 0px;
padding: 0px;
width: auto;
}
ul#mainlevel-nav
{
list-style: none;
padding: 0;
margin: 0;
font-size: 0.8em;
}
ul#mainlevel-nav li
{
background-image: none;
padding-left: 0px;
padding-right: 0px;
float: left;
margin: 0;
font-size: 11px;
line-height: 21px;
white-space: nowrap;
border-right: 1px solid #cccccc;
}
ul#mainlevel-nav li a
{
display: block;
padding-left: 15px;
padding-right: 15px;
text-decoration: none;
color: #333333;
background: transparent;
}
#buttons>ul#mainlevel-nav li a { width: auto; }
ul#mainlevel-nav li a:hover
{
color: #fff;
background: #c64934;
}
#search_outer {
float: left;
width: 165px;
}
#search_inner {
border: 1px solid #cccccc;
padding: 0px;
height: 21px !important;
height: 23px;
overflow: hidden;
}
#search_inner form {
padding: 0;
margin: 0;
}
#search_inner .inputbox {
border: 0px;
padding: 3px 3px 3px 5px;
font-family: arial, helvetica, sans-serif;
font-size: 11px;
color: #c64934;
margin-top:3px;
}
#header_outer {
text-align: left;
border: 0px;
margin: 0px;
}
#header {
float: left;
padding: 0px;
margin-right: 2px;
width: 635px;
height: 150px;
background: url(../images/header_short.jpg) no-repeat;
}
#top_outer{
float: left;
width: 165px;
}
#top_inner {
border: 1px solid #cccccc;
padding: 2px;
height: 144px !important;
height: 150px;
overflow: hidden;
float: none !important;
float: left;
}
#left_outer {
float: left;
margin-top: 2px;
width: 165px;
}
#left_inner {
border: 1px solid #cccccc;
padding: 2px;
float: none !important;
float: left;
}
#content_outer {
padding: 0px;
margin-top: 0px;
margin-left: 2px;
/** border: 1px solid #cccccc; **/
float: left;
width: 635px;
}
#content_inner{
float: none !important;
float: left;
padding: 0;
padding-top: 2px;
margin: 0;
}
table.content_table {
width: 100%;
padding: 0px;
margin: 0px;
}
table.content_table td {
padding: 0px;
margin: 0px;
}
#banner_inner {
float: left;
padding: 0px;
height: 70px;
}
#poweredby_inner {
float: right;
padding: 0px;
margin-left: 0px;
height: 70px;
}
#right_outer {
margin-left: 2px;
width: 165px;
}
#right_inner {
float: none !important;
float: left;
border: 1px solid #cccccc;
padding: 2px;
}
.user1_inner {
border: 1px solid #cccccc;
float: none !important;
float: left;
margin: 0px;
padding: 2px;
}
.user2_inner {
border: 1px solid #cccccc;
float: none !important;
float: left;
margin: 0px;
padding: 2px;
}
table td.body_outer {
padding: 2px;
border: 1px solid #cccccc;
}
.maintitle {
color: #ffffff;
font-size: 40px;
padding-left: 15px;
padding-top: 20px;
}
.error {
font-style: italic;
text-transform: uppercase;
padding: 5px;
color: #cccccc;
font-size: 14px;
font-weight: bold;
}
/** old stuff **/
.back_button {
float: left;
text-align: center;
font-size: 11px;
font-weight: bold;
border: 3px double #cccccc;
width: auto;
background: url(../images/button_bg.png) repeat-x;
padding: 0px 10px;
line-height: 20px;
margin: 1px;
}
.pagenav {
text-align: center;
font-size: 11px;
font-weight: bold;
border: 3px double #cccccc;
width: auto;
background: url(../images/button_bg.png) repeat-x;
padding: 0px 10px;
line-height: 20px;
margin: 1px;
}
.pagenavbar {
margin-right: 10px;
float: right;
}
#footer {
text-align: center;
padding: 3px;
}
#footerNew {
font-size:12px;
padding: 3px;
margin-left:20px;
margin-right:8px;
border-top:1px solid #7f91b4;
padding-bottom:400px;
}
#footerLeft {
float:left;
margin-left:0px;
color:#5f5c5c;
font-size:10px;
padding-left:0;
}
#footerRight {
margin-top:-15px;
float:right;
margin-right:0px;
padding-right:0;
}
.contactRollover {
margin-right:0px;
display:inline;
float:right;
width:52px;
height:13px;
background: url(/silence/templates/rhuk_solarflare_ii/images/footerContactDual.gif) no-repeat;
text-indent:-9999px;
}
a{ outline:none;}
a.contactRollover:link, a.contactRollover:visited, a.contactRollover:active {
background: url(/silence/templates/rhuk_solarflare_ii/images/footerContactDual.gif) no-repeat;
}
a.contactRollover:hover {background-position:-52px 0;}
.legalRollover {
display:inline;
float:right;
width:93px;
height:13px;
background: url(/silence/templates/rhuk_solarflare_ii/images/footerLegalDual.gif) no-repeat;
text-indent:-9999px;
}
a.legalRollover:link, a.legalRollover:visited, a.legalRollover:active {
background: url(/silence/templates/rhuk_solarflare_ii/images/footerLegalDual.gif) no-repeat;
}
a.legalRollover:hover {background-position:-93px 0;}
#searchField {display:inline;}
#goButton {display:inline;}
.goButton {margin-top:3px;}
.goRollover {
display:inline;
float:left;
width:19px;
height:19px;
background: url(/silence/templates/rhuk_solarflare_ii/images/goDual.gif) no-repeat;
text-indent:-9999px;
}
a.goRollover:link, a.goRollover:visited, a.goRollover:active {
background: url(/silence/templates/rhuk_solarflare_ii/images/goDual.gif) no-repeat;
}
a.goRollover:hover {background-position:-19px 0;}
ul
{
margin: 0;
padding: 0;
list-style: none;
}
li
{
line-height: 15px;
padding-left: 15px;
padding-top: 0px;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
background-position: 0px 2px;
}
td {
text-align: left;
font-size: 11px;
}
/* Joomla core stuff */
a:link, a:visited {
color: #c64934; text-decoration: none;
font-weight: bold;
}
a:hover {
color: #900; text-decoration: none;
font-weight: bold;
}
table.contentpaneopen {
width: 100%;
padding: 0px;
border-collapse: collapse;
border-spacing: 0px;
margin: 0px;
}
table.contentpaneopen td {
padding-right: 5px;
}
p.contentpaneopen {
padding-right: 5px;
}
table.contentpaneopen td.componentheading {
padding-left: 4px;
}
table.contentpane {
width: 100%;
padding: 0px;
border-collapse: collapse;
border-spacing: 0px;
margin: 0px;
}
table.contentpane td {
margin: 0px;
padding: 0px;
}
table.contentpane td.componentheading {
padding-left: 4px;
}
table.contentpaneopen fieldset {
border: 0px;
border-bottom: 1px solid #eee;
}
.button {
color: #c64934;
font-family: Arial, Hevlvetica, sans-serif;
text-align: center;
font-size: 11px;
font-weight: bold;
border: 3px double #cccccc;
width: auto;
background: url(../images/button_bg.png) repeat-x;
padding: 0px 5px;
line-height: 18px !important;
line-height: 16px;
height: 26px !important;
height: 24px;
margin: 1px;
}
.inputbox {
padding: 2px;
border:solid 1px #cccccc;
background-color: #ffffff;
}
.componentheading {
background: url(../images/subhead_bg.png) repeat-x;
color: #666666;
text-align: left;
padding-top: 4px;
padding-left: 4px;
height: 21px;
font-weight: bold;
font-size: 10px;
text-transform: uppercase;
}
.contentcolumn {
padding-right: 5px;
}
.contentheading {
height: 30px;
color: #002469;
font-weight: normal;
font-size: 16px;
white-space: nowrap;
padding-left:2px;
}
.contentpagetitle {
font-size: 13px;
font-weight: bold;
color: #cccccc;
text-align:left;
}
table.searchinto {
width: 100%;
}
table.searchintro td {
font-weight: bold;
}
table.moduletable {
width: 100%;
margin-bottom: 5px;
padding: 0px;
border-spacing: 0px;
border-collapse: collapse;
}
div.moduletable {
padding: 0;
margin-bottom: 2px;
}
table.moduletable th, div.moduletable h3 {
background: url(../images/subhead_bg.png) repeat-x;
color: #666666;
text-align: left;
padding-left: 4px;
height: 21px;
line-height: 21px;
font-weight: bold;
font-size: 10px;
text-transform: uppercase;
margin: 0 0 2px 0;
}
table.moduletable td {
font-size: 11px;
padding: 0px;
margin: 0px;
font-weight: normal;
}
table.pollstableborder td {
padding: 2px;
}
.sectiontableheader {
font-weight: bold;
background: #f0f0f0;
padding: 4px;
}
.sectiontablefooter {
}
.sectiontableentry1 {
background-color : #ffffff;
}
.sectiontableentry2 {
background-color : #f9f9f9;
}
.small {
color: #999999;
font-size: 11px;
}
.createdate {
height: 15px;
padding-bottom: 10px;
color: #999999;
font-size: 11px;
}
.modifydate {
height: 15px;
padding-top: 10px;
color: #999999;
font-size: 11px;
}
table.contenttoc {
border: 1px solid #cccccc;
padding: 2px;
margin-left: 2px;
margin-bottom: 2px;
}
table.contenttoc td {
padding: 2px;
}
table.contenttoc th {
background: url(../images/subhead_bg.png) repeat-x;
color: #666666;
text-align: left;
padding-top: 2px;
padding-left: 4px;
height: 21px;
font-weight: bold;
font-size: 10px;
text-transform: uppercase;
}
a.mainlevel:link, a.mainlevel:visited {
display: block;
background: url(../images/menu_bg.png) no-repeat;
vertical-align: middle;
font-size: 11px;
font-weight: bold;
color: #ccc;
text-align: left;
padding-top: 5px;
padding-left: 18px;
height: 20px !important;
height: 25px;
width: 100%;
text-decoration: none;
}
a.mainlevel:hover {
background-position: 0px -25px;
text-decoration: none;
color: #fff;
}
a.mainlevel#active_menu {
color:#fff;
font-weight: bold;
}
a.mainlevel#active_menu:hover {
color: #fff;
}
a.sublevel:link, a.sublevel:visited {
padding-left: 1px;
vertical-align: middle;
font-size: 11px;
font-weight: bold;
color: #c64934;
text-align: left;
}
a.sublevel:hover {
color: #900;
text-decoration: none;
}
a.sublevel#active_menu {
color: #333;
}
.highlight {
background-color: Yellow;
color: Blue;
padding: 0;
}
.code {
background-color: #ddd;
border: 1px solid #bbb;
}
form {
/* removes space below form elements */
margin: 0;
padding: 0;
}
div.mosimage {
border: 1px solid #ccc;
}
.mosimage {
border: 1px solid #cccccc;
margin: 5px
}
.mosimage_caption {
margin-top: 2px;
background: #efefef;
padding: 1px 2px;
color: #666;
font-size: 10px;
border-top: 1px solid #cccccc;
}
span.article_seperator {
display: block;
height: 1.5em;
}
/*added styles*/
#search {
height:30px;
width:190px;
background-color:#4c6696;
margin-top:0px;
}
.white {
color:#fff;
padding:5px;
font-size:11px;
}
/*Added from 3 col layout*/
p {margin: 0; padding: 8px;}
h2 {font-size: 1.2em; text-align: center; padding: 10px;}
.clear { clear: both; }
a {text-decoration: underline; font-weight: bold; color: #000;}
.alignright {margin-top: 0; text-align: right;}
.small {font-size: .9em;}
.wrapper {
margin: 0 auto;
width: 768px;
text-align: left;
/*background: #add8e6;*/
background: #ffffff;
border: 0px solid #000;
color:#5f5c5c;
}
/*** Below is the Tan hack, needed because the decorative side borders (thin black) on
.wrapper. It fixes the box model of IE5.x/win, making it display the same as other browsers. ***/
* html .wrapper {
width: 771px;
w\idth: 768px;
}
.outer {
border-left: 150px solid #ffffff;
border-right: 190px solid #ccd3e1;
background: url(images/blackline.gif) 100% 0 repeat-y;
}
/*** These are the visible side col BG's. The image BG is needed to replace a side border
on div.inner, which can't be used because of problems in Mozilla. The image substitutes
for the thin black divider between the right green col and the center col. If the black divider
is not wanted, the BG image may be removed. The Tan hack below feeds a IE a different
BG location, due to a BG placement variation.
***/
* html .outer {
background: url(images/blackline.gif) 565px 0 repeat-y;
}
.inner {
margin-left: -2px; /*** This fixes a small overlap problem in IE6. ***/
width: 620px; /*** This width is for non-IE browsers. Mozilla makes this necessary. ***/
border: 0px solid #000;
border-width: 0 0 0 0px;
}
/*** div.inner is wider than its container, div.outer, and so overlaps to the right, pushing
div.right into the proper position. IE expands div.outer instead, requiring a Tan hack to avoid
blowing the layout apart. IE gets the original 100% width as in the Livingstone layout. It blows
my mind that all this hacking is being caused by the mighty Gecko engine! (shakes head ruefully)
***/
* html .inner {
width: 100%;
}
.float-wrap {
float: left;
width: 567px;
margin-left: -150px; /*** Same length as left column width ***/
}
/*** div.left is in div.float-wrap, and when div.float-wrap is neg margined to the left,
div.left is carried over into the proper position.
***/
.left {
margin-top:25px;
}
#line {
border-right:1px solid #000000;
height:100%;
}
.right {
float: right;
width: 190px;
position: relative; /*** IE needs this or the contents won't show outside the parent container. ***/
background-color:#ccd3e1;
}
* html .right {
margin: 0 -190px 0 0; /*** IE gets this margin. ***/
}
.center {
margin-top:23px;
float: right;
width: 415px;
background: url(/silence/templates/rhuk_solarflare_ii/images/navBlueLine.gif) repeat-y 0 0;
}
.leftCenter {
width:2px;
}
.wide {
background-color: #002469; /* header and footer colours */
width: 100%;
border: 2px solid #000;
font-size: 1.4em;
font-weight: bold;
}
.wide p {padding: 5px;}
.top {border-width: 0 0 0px;
overflow:hidden;}
.bottom {border-width: 2px 0 0;}
/* Mozilla bug fixes */
html>body .inner, html>body .float-wrap {
border-bottom: 1px solid transparent;
}
.grey {
color:#5f5c5c;
}
.newsflash {
padding: 15px 10px;
width:175px;
color:#5f5c5c;
font-size: 10px;
}
.newsflashTitle {
color:#4c6696;
font-weight:bold;
margin-left: -7px;
font-size: 11px;
}
a.readon {
color:#002469;
background: url(/silence/templates/rhuk_solarflare_ii/images/redArrow.gif) no-repeat left;
font-size: 10px;
}
a.readon:hover {
color:#002469;
background: url(/silence/templates/rhuk_solarflare_ii/images/redArrow.gif) no-repeat left;
font-size: 10px;
}
a.readon:visited {
color:#002469;
background: url(/silence/templates/rhuk_solarflare_ii/images/redArrow.gif) no-repeat left;
font-size: 10px;
}
Any help would be greatly appreciated. Thanks. P.s. How do I post links to the site on here?...I tried but it removed the URL saying (URL address blocked: See forum rules) Hi, I am having a problem with positioning of text within a div. The CSS for my div is: #menuItem { background-image: url('../../images/menu_bg_off.jpg'); width: 146px; height: 28px; font-family: Verdana, sans-serif; font-size: 14px; font-weight: bold; background-repeat: no-repeat; } <div id="menuItem"><img src="images/spacer.gif" width="33" height="1" /><a href="">Home</a></div> The problem lies in getting the text to appear in the middle of the div. I've tried using padding-top: to nudge it down a bit, but that extends the height of the div.. which I don't want to happen. I have a bunch of these lined up vertically (forming a menu) and I don't want any space between them. margin-top: also adds this unwanted space. As you can see I'm using a transparent spacer image to nudge the text horizontally to where I need it to appear, which works. My question is.. how do I position the text vertically to where I want it to appear inside the div? this is the first time im making a CSS website. w3schools.com really is a big help, but i came upon a problem. on the layout, on the upper left, i got my main menu. i positioned some text there with this code in <head> Quote: h1 { position: relative; top: 46px; left: 135px; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF; } h2 { position: absolute; top: 63px; left: 135px; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF; } ( as u can see, i tried "relative" but it doesnt work ) and then typed the links of the menu like this: Quote: <h1><a href="index.html">Home</a></h1> <h2><a href="aboutus.html">About Us</a></h2> ect. but when i rezise the browser or take a different resolution, then the text also moves along. the text doenst stay on its place on the menu. for example, if i make the length of the browser smaller, then the text moves out of the menubox, to the right. i hope u understand this. how can i make sure that the text will always stay on its place, on every browser size/resolution? Hi Basically i have positioned some text on my site in the place i need, and it looks fine while the browser is maximised. But when i resize, the text moves to accommodate. Is there anyway i can have the text in the right place, but not move when the browser is resized? Thanks Hello all, My second post . I have a div box with text in it. It looks fine in ie, but the text drops when viewed in mozilla. I have highlighted the border for clarity and want the text to remain directly underneath. I have tried adding styles to mainsection, the div in question, and also the p text attribute, with no joy. As with my last problem I am sure the solution is a simple style, but I can't find it. Any help would be much appreciated. thanks Solar. html page: http://darkspeed.atspace.com/Textest.htm CSS link: http://darkspeed.atspace.com/txtstyle.css thanks again. hey all, i'm trying to figure out how to position text in an h1 tag that uses a background image, without adding extra markup. i just need it 15px from the left of the image, and 10px from the top. here's the css for the h1 tag: Code:
h1 {
height:50px;
width:100%;
background:white url(images/h1_background.gif) no-repeat left;
margin-top:12px;
color:white;
font-size:11pt;
}
and the html is just; Code: <h1>welcome</h1> thanks! Hi Guys, Basically, I have Text in a content box, all fine and dandy, this content box has a fixed width and an expanding height depending on supplied content. I now need 2 further divs, one of which floats to the right, and positioned at the top of this content div, the other also floats right but needs to be alligned bottom. Ive tried absolutes with content being relative but although this does solve the positioning problem, obviously the content text will not wrap around the divs. ------------| ------------| ------------|_______| --------------------------- ------------------ ---------------------- ---------------------------- ------------------------ -----------| -----------| -----------| -----------|_______________| Basicaally like above (sorry, cant screenshot the project im working on :]) Code: <div style="width:591px; position:relative; z-index:1;"> <div style="width:150px; height:100px; float:right;"> ZZZZZZZZZZZ </div> <div style="width:150px; height:100px; float:right;"> ZZZZZZZZZZZ </div> <div style="width:291px; height:100px; float:left;"> asfasfasgsdgdsdbn gksdjbgvsdb gjkdgkjsdb gkjsdbgksd jb gjksgsd dkj kasfasfasgsdgdsdbn gksdjbgvsdb gjkdgkjsdb gkjsdbgksd jb gjksgsd dkj kasfasfasgsdgdsdbn gksdjbgvsdb gjkdgkjsdb gkjsdbgksd jb gjksgsd dkj k </div> <div class="clear"></div> </div> I'm pretty new to CSS so bear with me if this is a silly question. I want to go totally CSS and 0 tables. 1 problem that I've been having with my site is that I have several forms for data entry. These are of course done in 2 column tables, label in the 1st column, text box in the right. The problem I'm having is that I cannot get the text boxes to line up properly using CSS. I am trying a test page simulating a login page. But since the words Username and Password are different lengths, the left edges of the text boxes don't line up evenly. What is the best technique to get CSS to display 2 columns like a 2 column table where the first 'column' contains a text label and the 2nd column has the input boxes aligned nice and neat? Hi, I've recently built my first site using the Magento eccomerce paltform. I'm having a problem with the text box for the item descriptions on the product pages. The problem is that on page load the item description drops about 200px and overlaps outside of the text box area. This only happens in IE. I'm sure this is a CSS stylign issue but i'm not entirely sure what needs to be done or which attribute wil fix it. Any help would be appreciated. I'm not allowed to post urls on this forum as a new user but the website is a UK site called lowpricememory. The url is lowpricememory with dot co dot uk. You will see the problem on any product page. Thanks, Tim Its been a long time now and I am finnaly getting back into website desiging. I am doing a simple coding but I am having a hard time trying to figure out how to do the following. I want to create a table but using only divs. So basically I am going to have a parent div acting as the whole table then sub-div acting as each row, and within those divs there will be more divs acting as each cell. But I can't figure out how to make each cell be right next to each other instead of on the next line. How do I make it look like below: |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| |<div>| Also, what CSS properity do I have to use so that the content of each cell will overlap with all th surrounding cells? By overlap I mean so they will be touching each other. I'm trying to position some things inside a DIV. Here's the basic layout: What I did was put them in DIVs position them within the "parent" DIV relative to the upper left. Doesn't seem to work, so I'm doing something wrong. Image One is easy, but the text and Image Two I just don't seem to grasping. I've looked at the Floatutorial, I'm not grasping it, or the answer isn't there. Should the text block and Image Two be within a separate DIV? Hello, If you go to http://tombraiders.net/katie/sid/index.html User: letme Pass: in you'll see that the body text is shifted halfway down the page as well as the menu. Anyone know how I can fix this? Also, how can I fix the rollover for the menu? I don't want the rollover coloured square to be so long. Thanks! Hi, Here is the problem I'm having: This: see attached cssprobl.jpg should become: http://www.thephotofactory.nl/csstest/cssprobl-goal.jpg Here's the CSS code I have: Code:
body{
background-color: #FFFFCC;
margin: 0px;
padding: 0px;
}
.holder{
background-color: red;
width: 250px;
height: 400px;
float: left;
margin: 10px 10px;
}
.img{
padding: 0px;
width: 200px;
height: 200px;
margin: 20px 10% 0px 10% ;
border: 2px white solid;
}
h1{
font: 35px Arial, Helvetia, sans-serif;
color: white;
text-align: center;
margin-top: 10px;
}
.omschrijving{
background-color: grey;
font: 15px Arial, Helvetia, sans-serif;
text-align: left;
margin-top: 10px;
padding: 5px;
}
.prijs{
font: 25px Arial, Helvetia, sans-serif;
color: white;
text-align: center;
margin-top: 10px;
}
.dec{
vertical-align: super;
font: 14px Arial, Helvetia, sans-serif;
color: white;
}
.euro{
font: 14px Arial, Helvetia, sans-serif;
color: white;
}
.omschrijvingholder{
background-color: black;
width: 250px;
height: 100px;
margin-top: 0px;
}
.prijsholder{
background-color: green;
width: 80px;
height: 40px;
vertical-align: bottom;
float: right;
}
and this is one of the sections: Code: <div class="holder"> <h1>Theeglas </h1> <div class="img"> <img src="theeglas.jpg" alt="theeglas met bedrukking" title="theeglas met bedrukking" width=200 height=200></img> </div> <div class="omschrijvingholder"> <div class="omschrijving"> Een mooi theeglas met een doorzichtige bedrukking. </div> <div class="prijsholder"> <div class="prijs"> <span class="euro">€</span> 9,<span class="dec">95</span> </div> </div> </div> </div> SO: how do I get that green part exactly there (and without going outside the red box), and how do I wrap the text in the grey part around it? After 2 hours of trying all kinds of options I give up and call for help Here is the full link: http://www.thephotofactory.nl/csstest/valentijn.htm Second problem: in IE the white border around the img is too low, leaving a red space. How to avoid that? Thanks in advance, Papermouse PS How do I put an uploaded image in this message? Hi Guys, Ive not been doing the CSS stuff too long as I used to use tables all the time for this stuff. Im ultimately trying to get 3 news articles for eg on a homepage with a mini image to the left of the text which wraps around it. The text sometimes is not going to be the size of the image so the next article needs to drop to the next line underneath. It isnt though and its listing in a diagonal line instead. Any one got any tips. Code: <div id="m1"> <div class="nw1"> <h2><a href="/">Money test title</a></h2> <p><img src="/includes/img/archive/100x77-0000000001.jpg" width="100" height="77" class="img1" />Latest shinanigans on the money savings scene today are... just gonna pack this out to see if the image does eventually fit in at all which would be nice because it should work! But who knows eh? :D Its just an interesting topic to look into la de dah de dah!</p><br /> </div> <div class="nw1"> <h2><a href="/">Money test title</a></h2> <p>Latest shinanigans on the money savings scene today are...<img src="/includes/img/archive/100x77-0000000001.jpg" width="100" height="77" class="img1" /></p><br /> </div> <div class="nw1"> <h2><a href="/">Money test title</a></h2> <p>Latest shinanigans on the money savings scene today are...<img src="/includes/img/archive/100x77-0000000001.jpg" width="100" height="77" class="img1" /></p><br /> </div> </div> Ive tried a few things like putting div's around each specific article see if i could somehow force it to a new line but it isnt working. The img tags ive moved about. Im using float left on them. Any one any suggestions? Im really stumped and close to hitting the monitor If it helps I could pm the url to you if you think u can help. Thanks guys. Im hoping this is a relatively easy problem as most sites layout like this just I can't get it to do it! hehe! Hi, I have a table cell where I have to place an image and title (centered) by the side of it. I am using the following code but does not work the way I wanted. <table> <tr> <td> <img src="graphics/gifs/spotlight_xlr.gif"> Title </td> </tr> </table> The "Title" text is getting displayed by the side of the image but to the bottom. I want the Text to be centered around the image. Both the IMG and Text should be part of the same TD tag. I know with CSS it is possible. Please help. Thanks, VMRao Hi there, I recently started up an internship at a music magazine and they asked me to do a simple side site to present some information. I left it pretty simple for most of it but wanted to challenge myself a bit with some CSS for one of the pages. The page in question is the 05 Panel Page It looked better in Firefox earlier, but I recently made some changes according to the site editors which made it look a lot less clean in Firefox and damn ugly in IE. I would like to have that introductory block of text be where it is with the panel information on the left side and the photos and text wrapping where appropriate. I've been fiddling with padding a lot, but haven't made too much headway. I know that there's a lot going on to be helped out with specific parts (although I wouldn't mind if anyone could). But if you had any topics that I should concentrate looking up information on, then that would be just as helpful. Edit: I was also having problems giving the entire side enough padding to stay away from the edges of the browser window. However I ran into problems on the right side of the page: some of the text would go too far past the headers. And if that didnt happen, extra space in general appears on that right side. I have a web site using XHTML 1.0 Strict. The main body of the web pages is absolutely positioned 225px from the left, 100px from the top and is 750px wide. There is a banner and menu at the top and then another menu with links to the left. They are also absolutely positioned as well. I am using IE 6.0 as the main web browser since this is a corporate environment. The problem that I am having is that when I select text in the main body it either selects everything from the top down to the cursor or from the cursor to the end. I have troubleshot this and narrowed it down to the absolute positioning. It works fine in IE 7 with the absolute positioning. Does anyone know why this is happening and is there a work around for this? Thank you. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Code: #content {
position:absolute;
width: 750px;
left: 225px;
top: 100px;
z-index: 500;
border-top-style: outset;
border-right-style: outset;
border-bottom-style: outset;
border-left-style: outset;
background-color: #ECE9E2;
}
notice difference between first two txt fields and the third one. first two have only background color changed, but in IE they have become bigger, in Moziila/Netscape their border is chaged.. I would like to have background color changed, but size, color and border width stay same, like in third textfield.. please use following code for refference: Code:
<html>
<head>
<style>
.boxA { background-color:#CCCCCC; }
.boxB { background-color:#999999; }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<body>
<input type="text" id="text1" class="boxB" onFocus="makeLight(this)" onBlur="makeDark(this)"><br><br>
<input type="text" id="text2" class="boxB" onFocus="makeLight(this)" onBlur="makeDark(this)"><br><br>
<input type="text" id="text3">
<br><br>
<script>
function makeLight(obj){
obj.className="boxA";
}
function makeDark(obj){
obj.className="boxB";
}
</script>
</body>
</html>
|
|||||||