|
CSS - Css Alignment Over Images
Hi,
I have text that is generated from a mysql database and have positioned it over buttons in order to create a menu. However I just thought in other browsers and other computers the text will align differently and therefore appear in random places on the website. Is there any other way to do this? Please explain it simply as I struggle with css at the nest of times. Thanks in advance Similar TutorialsHi All, I am new to devshed and new to css stuff. I have a problem with a site i am currently building. http://www.foodaffairs.co.za Basically there is a yellow link box underneath the flash image which in FF(Firefox) is out a little to the right and in IE out to the left. The yellow block is actually an image which is the same width as the flash image but just doesn't wanna line up. Anyone had this problem or could help me fix it? Thanks LoTi Is there a way to align the images in the virtical middle? In the example, they align to the top. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style>
.nav_box {
padding: 1px 1px 1px 1px;
background-color: #003366;
text-align : left;
font-family: tahoma,verdana,arial,helvetica,sans-serif;
font-size: 10pt;
font-weight: bold;
color: #eef7ff;
}
.block_up {
float: left;
margin: 0 0 2px 2px;
}
.block_down {
float: left;
margin: 0 0 2px 2px;
}
p {display: inline;}
</style>
</head>
<body>
<div class="nav_box">
<p><img class="block_up" src="./images/block_up.gif" width="11" height="11" />
<img class="block_down" src="./images/block_down.gif" width="11" height="11" />
Some Test Text</p>
</div>
</body>
</html>
Been trying to get these divs to align but with no success. Can someone be so kind to show me how to get the XHTML/CSS to look like the attachment below... PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html dir="ltr" lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" /> <title>Top Bar</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <style type="text/css"> <!--/*--><![CDATA[/*><!--*/ .bdr { width:100%; height:122px; background-color:#aaaaaa; text-align:center; border:#000000 3px double; } .lchief { float:left; width:69%; height:122px; background-color:#ffffff; text-align:center; } .rchief { float:right; width:382px; height:122px; display:block; position:relative; padding:0px 0px 0px 0px; background-color:#a0a0a0; } .stats { float:left; width:221px; height:102px; margin: 0px 0px 0px 20px; padding:10px; background-color:#e0e0e0; font:9pt verdana; line-height:12px; text-align:center; } .tmar { float:left; width:72px; height:19px; margin-top:10px; margin-right:2px; background-color:#bbbbbb; line-height:15px; } .tmar2 { float:left; width:72px; height:19px; margin-top:2px; margin-right:2px; background-color:#bbbbbb; line-height:15px; } .tnom { float:left; width:72px; height:19px; margin-top:10px; background-color:#bbbbbb; line-height:15px; } .tnom2 { float:left; width:72px; height:19px; margin-top:2px; background-color:#bbbbbb; line-height:15px; } .sidemenu { float:right; width:73px; height:102px; margin: 0px 20px 0px 0px; padding:10px; background-color:#c0c0c0; font:7pt verdana; text-align:center; } /*]]>*/--> </style> </head> <body> <div class="bdr"> <div class="lchief"> IMAGE </div> <div class="rchief"> <div class="stats"> <div class="tmar"> TBA </div> <div class="tmar"> TBA </div> <div class="tnom"> TBA </div> <div class="tmar2"> TBA </div> <div class="tmar2"> TBA </div> <div class="tnom2"> TBA </div> <div class="tmar2"> TBA </div> <div class="tmar2"> TBA </div> <div class="tnom2"> TBA </div> <div class="tmar2"> TBA </div> <div class="tmar2"> TBA </div> <div class="tnom2"> TBA </div> </div> <div class="sidemenu"> TBA<br /> TBA<br /> TBA<br /> TBA<br /> TBA<br /> TBA<br /> TBA<br /> </div> </div> </div> </body> </html> TIA, Taro HI, I'm trying to get a line of text to lineup with a textbox using css. The code I have is as follows: Code:
.row {
height: 30px;
vertical-align: text-top;
}
.formField {
border: 1px solid #666;
width: 150px;
background: #FFFFFF;
color: #000000;
}
<body>
<div class="row">
xxxxx: <input type="text" class="formField">
</div>
</body>
The textbox is sitting just above the text. How can I get them lined up properly? Hi, I am trying to convert my table design to CSS and building the bare structure now but having some troubles with the alignment/layout. I want to move the left and right columns under the header div. but with float: left, they keep sticking to each other. here is the link: http://www.internationalnannies.com/test/ here is my CSS: Code:
/* Structure setup */
#header {
background-color: Aqua;
}
#body {
background-color: grey;
}
#leftColumn {
background-color: silver;
float: left;
width: 150px;
position: relative;
}
#rightColumn {
background-color: blue;
float: left;
width: auto;
position: relative;
}
#footer {
background-color: pink;
clear: both;
position: relative;
}
#photo {
background-color: grey;
margin-right: 5px;
float: left;
position: relative;
}
#headerRightContent {
background-color: red;
position: relative;
float: left;
}
/* *********************************** */
and here is my html: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>index</title>
<style type="text/css">
@import "styles.css";
</style>
</head>
<body>
<div id="header">
<div id="photo"><img src="images/noImage.gif" width="120" height="160" alt="noImage (1K)" /></div>
<div id="headerRightContent">right content</div>
</div>
<div id="body">
<div id="leftColumn">left</div>
<div id="rightColumn">right</div>
</div>
<div id="footer">footer</div>
</body>
</html>
Can someone do a quick review of this and comment? Thanks, Edwinx hey all... i have got a prob with a area in IE. It looks great when the users browseer is fullscreen and no favourites/history etc window is open. However once the window is resized or fav's are turned on then the content div drops to the bottom works fine in Moz FF but can't make it work in IE.. any ideas from anyone would be really great. thanks the link to the page is here and for the css click here thanks in advnaced ! RF I have two columns (menu and content) and would like them to be horizontally aligned to the center sensitive to the size of the browser and relative to each other. I have figured out how to do this with the content column (right one) but I'm having trouble doing this with the menu column. I would like it to be equally space relative to the placement of the content column. Any help would be appreciated. Here's the code: Code: / { margin: 0; padding: 0; }
body { font-size: 12px; font-family: Helvetica Neue, Arial, Verdana, sans-serif; background: #F2F2F2; }
body.section-1 { }
body.section-2 { }
body.section-3 { }
a:link { text-decoration: none; } a:active { text-decoration: none; } a:visited { text-decoration: none; color: #666; } a:hover { background-color: black; color: #f2f2f2; } a img { border: none; }
#menu { width: 130px; overflow: hidden; top: 40px; position: fixed; height: 100%; background-color: #e6e6e6; text-align: left; margin: 0px 0px 0 0px 180px; left: 12%; }
#menu ul { list-style: none; margin: 0px; }
#menu ul li.section-title { }
#content { height: 150%; width: 700px; margin: 0 0 0 300px; top: 40px; position: relative; background-color: white; overflow: auto; padding: 15px; margin-left: auto; margin-right: auto; } .container { padding: 0px; }
#content p { width: 400px; margin-bottom: 15px; }
p { margin: 0 0 9px 0; } h1 { font-size: 32px; } h2 { font-size: 24px; } h3 { font-size: 16px; } h4 { font-size: 12px; }
#img-container { margin: 0; padding: 0; }
#img-container p { width: 400px; margin: 0; padding: 0 0 12px 0; } #once { clear: left; }
I am working on a site that I have taken over development of and there is an alignment problem here any ideas on what the problem is or how to fix it? Thanks! Hello... Here is the site I'm having issues with ralphwall.com I'm noticing that it only happends in IE6 and not other browsers. It's shifting my float:right; column down the page. Here is the code in my css. Could anyone please help? I'm starting to pull my hair out. Thanks in advance. body{ cursor:url("assets/mouse.cur"); background-color:#20110A; overflow:hidden; font-family:Georgia, "Times New Roman", Times; font-size:14px; color:#FEF5E0; } a:link{ color:#FEF5E0; background-color:#7E5F33; } a:visited{ color: #FEF5E0; background-color: #7E5F33; } a:hover{ color: #7E5F33; background: #FEF5E0; } img{ border:0; } ul{ list-style-type:square; } #header{ float:left; width:90%; padding-left:5%; padding-right:2.5%; } #header h1{ font-family:Georgia, "Times New Roman", Times; font-size:36px; font-style:italic; color:#7E5F33; } #topnav{ float:right; width:95%; padding-right:2.5%; text-align:right; border-top: solid #7E5F33; } .hovermenu ul{ padding-left: 0; margin-left: 0; height: 16px; } .hovermenu ul li{ list-style: none; display: inline; } .hovermenu ul li a{ padding: 2px .5em; text-decoration: none; float: right; color: #FEF5E0; background-color: #7E5F33; border: 2px solid #7E5F33; } .hovermenu ul li a:hover{ background-color: #20110A; border-style: outset; } html>body .hovermenu ul li a:active{ /* Apply mousedown effect only to NON IE browsers */ border-style: inset; } #left{ float:left; width:20%; padding-left:5%; padding-right:2.5%; } #right{ float:right; width:60%; padding-left:5%; padding-right:2.5%; text-align:left; verticle-aling:top; } #right h1{ font-family:Georgia, "Times New Roman", Times; font-size:24px; font-style:italic; color:#7E5F33; } #footer{ float:right; width:95%; padding-right:2.5%; font-style:italic; text-align:right; } I have having trouble with CSS alignment when dealing with IE7 If i have 2 DIV tags (one inside the other) and set 10px padding for the first DIV tag and the set the left hand alignment of second DIV tag to 50% the left hand edge will be 50% plus the padding where as in FireFox and Safari it does not matter that there is padding it still aligns up to the 50% line. Can any body point me in the direction of a fix? Thanks Here is the thing.. i got this code that works just fine at any browser except IE < 6. Look the issue's image (better than explaining): http://img23.imageshack.us/img23/43/borderissue.jpg The code (for the page in the screenshot) Code:
<div id="container">
<div id="main">
<!-- INCLUDE CONTENT -->
<div id="content">
<!-- Conteudo Novidades -->
<div id="midnewsb">
<div id="midwrap">
<div id="midtitle">
<img src="bar_news.jpg" border="0" /> <b>NOVIDADES</b>
<div id="midnews">
<div id="textwrap">
<p><font color="#333333">dd/mm/aa - Novidade 1</font><br />
- Novidade 1 novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade</p><br />
<p><font color="#333333">dd/mm/aa - Novidade 1</font><br />
- Novidade 1 novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade</p><br />
</div>
<div id="midb"></div>
</div>
</div>
<br />
</div>
<div id="midb"></div>
</div>
<!-- FIM Conteudo Novidades -->
</div>
<div id="block"><br /></div>
<!-- FIM INCLUDE CONTENT -->
</div>
</div>
And the CSS: Code:
#container {
position:relative;
top:30px;
width:704px;
height:auto;
min-height:800px;
margin:auto;
margin:0 auto;
text-align:center;
}
#main {
width:704px;
height:100%;
margin:auto;
background-image:url(bg_mainb.jpg);
text-align:left;
}
#block {
margin:auto;
height:30px;
}
#content {
position:relative;
left:-3px;
top:20px;
width:496px;
height:auto;
min-height:450px;
margin:0px;
display: inline-block;
}
#midb {
background-image:url(bg_midb.jpg);
width:100%;
height:18px;
position:absolute;
bottom:0px;
}
#midwrap {
margin:6px;
}
#midtitle {
position:relative;
margin-top:2px;
width:496px;
color:#3E6F88;
}
#midnews {
position:relative;
margin-top:2px;
top:1px;
width:482px;
height:auto;
min-height:100px;
display: inline-block;
background-image:url(bg_mid.jpg);
background-repeat:no-repeat;
border:solid 1px #C9DEEC;
}
#midnewsb {
position:relative;
margin-top:0px;
width:496px;
height:auto;
display: inline-block;
background-image:url(bg_mid.jpg);
background-repeat:no-repeat;
border:solid 1px #C9DEEC;
}
#textwrap {
margin:6px;
width:476px;
height:auto;
}
Can anyone help me, please? Thanks Hi all this is my first post on the board! I have a slightly annoying problem with a nav menu I am trying to make; Here is the css #nav { background:url(images/nav.gif) no-repeat; width:470px; height:40px; margin-top:44px; padding:0; } #nav span { display: none; } #nav li, #nav a { height:40px; display:block; } #nav li { float:left; list-style:none; display:inline; } #nav-01 {width:65px;} #nav-02 {width: 65px;} #nav-03 {width: 65px;} #nav-04 {width: 65px;} #nav-05 {width:65px;} #nav-06 {width: 65px;} #nav-07 {width: 65px;} #nav-01 a:hover{background:url(images/nav.gif)0px -45px no-repeat;} #nav-02 a:hover {background:url(images/nav.gif) -65px -45px no-repeat; } #nav-03 a:hover {background:url(images/nav.gif) -130px -45px no-repeat; } #nav-04 a:hover {background:url(images/nav.gif) -195px -45px no-repeat; } #nav-05 a:hover {background:url(images/nav.gif) -260px -45px no-repeat; } #nav-06 a:hover {background:url(images/nav.gif) -325px -45px no-repeat; } #nav-07 a:hover {background:url(images/nav.gif) -390px -45px no-repeat; } Here is the HTML: <ul id="nav"> <li id="nav-01"><a href="index.html"><span>HOME</span></a></li> <li id="nav-02"><a href="index.html"><span>PLANNING</span></a></li> <li id="nav-03"><a href="index.html"><span>STRATEGY</span></a></li> <li id="nav-04"><a href="index.html"><span>DELIVERY</span></a></li> <li id="nav-05"><a href="index.html"><span>NEWS</span></a></li> <li id="nav-06"><a href="about.html"><span>ABOUT US</span></a></li> <li id="nav-07"><a href="index.html"><span>CONTACT</span></a></li> </ul> The problem I am having is that although the images are aligned when you hover over them, the image is sliced at the wrong position, I have tried adjusting every part of the css I can think of but I still can't figure it? Any ideas or help would be much appreciated. i42.tinypic.com/16libh0.gif here is the nav- notice the slice width is correct and the images are aligned, it is just that the slice happens in the wrong place.( u need to input the htt* bit ) Hi there, I want to make the text in my post content to align left and take the same width as the image (448px). I have changed the CSS of the post content, but all that happens is the posts get more un-aligned as you go down, as if the new 'left' alignment ruins the centering of everything. I'm using wordpress. Does anyone have any suggestions as to why this is happening, and how I can align my content text to the left? Thanks. Sorry if i repeat someone else's question, i've actually stumbled upon lots of solutions for this matter, but, as usual, there just seems to be no "only one" solution, so maybe someone here knows. In the good old days if i wanted to center all kinds of stuff, i'd use <div align="center">all kinds of <stuff></stuff></div>. Now i visit the w3c site and see the beautiful "deprecated" word by the "align" property, so i guess they once again need us to bash our heads against the walls with the most stupid invention in mankind: css. So can someone tell me how to center div's content horizontally? And not just text, i mean images, other tables or other kinds of things. If i assume correctly: If i use text-align - this is meant for text only If i use margin: 0 auto - that would align the div itself and not the content and we would need to know its width So is there any normal solution to this? I'm using a background image but am having a hard time indenting the text. Code:
ul.leftside li {
font: bold 11px Helvetica,sans-serif;
color: #FFF;
background: url(images/left_menu-bg.jpg) no-repeat;
margin: 7px 10px 5px 4px;
list-style-type: none;
}
<ul class="leftside">
<li> Rooms</li>
<li>Reservations</li>
<li>Siteseeing</li>
<li>Contact Us</li>
</ul>
The only way I can move the text over is by adding the non-binding spaces and I can't seem to get a style to work in the line item either. Thanks in advance! First of all, I know that my CSS is hideous and I have a ways to go in terms of coding. However, given the time I have, I've done my best for the time being. I recently launched a beta for my portfolio site and although everything was tested and working on my Mac (Opera, Safari, and Firefox), I noticed problems when testing it on a Windows machine and several versions of IE. First of all, here's the link: hellomynameisad.am Second, here are screen grabs of my Mac/Firefox and a PC/IE7. You'll notice that the padding between lines on the Mac screen grab is tight and neat whereas the space is wider and not even on the PC/IE7. Second, you'll notice that the rules extend the entire width of the white boxes on the Mac whereas they are short of 100% on the PC/IE7. Hopefully someone can lend a hand and help. Thanks! hellomynameisad.am/mac - firefox.png hellomynameisad.am/pc - ie.png Hello everyone. Another episode of stupid CSS tricks here! h-t-t-p://rewards.yarnell.openi.com/ This site looks good in IE8, Firefox, Safari, Chrome. Only older IE shows the rightmost DIV, the main content area, as underneath the rest of the page. This is not my first CSS only site, but for some reason, I can't figure out why it isnt displaying correctly in older IE. If you are using IE8 and need to see it broken, just throw the site into compatibility mode. I have all the DIV styles in the source, not in a stylesheet to make it easy for anyone to help me with this. I just know this is going to be something simple, and thank you in advance to anyone kind enough to give this a look! Have a great day! Hi, I have been working on a site that went live today. I have just been alerted of a problem by the client. On the front page I have an alignment issue in IE6 (and perhaps lower) www.formulation.org.uk I can't work out how to sort it. Any suggestions would be appreciated. I am on a mac so don't have the facilities to check often. Thanks all Tom Hi Guys, I'm having trouble with some alignment. I have a main div called 'left_sidebar' that has a few elements contained within it. At the top is a div that contains a user's profile pic, their name, and a link to edit their profile. Below that will be some navigation links, and some other items that will be dynamically populated depending on the page. The div that contains the photo, name, and profile edit link is giving me some trouble. Here's a pic of how it is currently Here's what I'm hoping to get. Below is the code I have. Nothing is being inherited that should affect how it's laid out or presented. Thoughts? I'm racking my brain and can't get this right. Also.. I need the border div to expand since the height of the image will not be set in stone. Code:
#left_sidebar
{
float: left;
margin: 0 0 .5em .5em;
width: 160px;
}
#left_sidebar_border
{
border: 1px solid #e87b02;
overflow: auto;
height: 100%;
margin: 0em 0em 1em 0em;
}
#left_sidebar_pic
{
margin: .5em .5em .5em .5em;
}
#left_sidebar_name_action_container
{
margin: 0em 0em 0em 0em;
}
#left_sidebar_name_action
{
}
#left_sidebar_name
{
}
<div id="left_sidebar">
<div id="left_sidebar_border">
<div id="left_sidebar_pic">
<a href="http://details.at/members/members.cfm?q=mpv1&url=jasonallenking">
<img style="float:left"src="http://details.at/imagehost/profiles/539/xs_IMAG0513.jpg">
</a>
</div>
<div id="left_sidebar_name_action_container">
<div id="left_sidebar_name">
<span class="mediumboldtext">
<a href="http://details.at/members/members.cfm?q=mpv1&url=jasonallenking">
Jason King
</a>
</span>
</div>
<div id="left_sidebar_name_action">
<span class="mediumtext">
<a href="http://details.at/members/members.cfm?q=pbi">edit profile</a>
</span>
</div>
</div>
</div>
</div>
|
|||||||