|
CSS - Aligning Two Elements Beside An Image
I have a logo and would like to align an H1 and an H2 beside it. So, I would have:
Code:
| H1 text
image|
| H2 text
If I add a display inline to both elements, I get the H2 beside the H1 instead of under. If I add it to only the H1, I get the H1 beside the image, and the H2 under the image. What would be the proper way to do this? Similar TutorialsI'm trying to align an image, header, and some text that is right aligned all on the same row. I've been reading so much about inline and block elements that my head feels like it's going to explode. It would look like this: Code: Picture - Header Text over here I'm not sure if everything should be span inside one class or what. I'm very confused. Please help a noob. The Website in Question I just started to remake my portfolio site from scratch, and since I'm a crappy coder, I ran into a brick wall right away. It was easy horizontally and vertically centering the tan rectangle, but for the life of me I can't get the green sliding panel where I want it, and have it otherwise horizontally and vertically centered at all times. How I want it: Example I think the problem may be a conflict between the javascript that enables the sliding function of the green panel and the CSS trying to center it. The javascript demands absolute positioning of the two divs (the part that says "PORTFOLIO" and the part that slides right), because that's what tells the sliding panel where to slide and expand to. However, the CSS demands relative positioning, in order to position the panel a percentage down the page, and half its height in pixels back up again, as well as the horizontal alignment. Below is the source code for the site. At the moment, the sliding panel (its code is shown in blue) is set to be in the top left corner of the site, but it obviously isn't. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<head>
<title></title>
<style type='text/css'>
body, html {
height:100%;
}
#container{
height:100%;
text-align: center;
}
#panel {
width: 700px;
height: 500px;
position:relative;
top:50%;
margin-top:-257px;
left:50%;
margin-left:-350px;
}
body {
background-image: url(bg3.gif);
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="container">
<div id="panel"><img src="work.png"></div>
</div>
<script type="text/javascript" src="Animation.js"></script>
<div style="position:relative;
width:350px;
height:520px;
top:0px;
left:0px;">
<div id="exampleHeader"
style="position:absolute;
width:50px;
height:500px;
top:0;
left:0px;
background:#298b12;
text-align:center;
color:#FFFFFF;
-moz-border-radius-topleft: 25px;
-webkit-border-top-left-radius: 25px;
-moz-border-radius-bottomleft: 25px;
-webkit-border-bottom-left-radius: 25px;"
onclick="runAnimation(animationObject, this)">
<img src="pf.png">
</div>
<div id="examplePanel"
style="position:absolute;
width:0px;
height:500px;
top:0px;
left:50px;
background:#ac926d;
background-image: url(pbg.gif);
background-position:right top;
overflow:hidden;
-moz-border-radius-topright: 25px;
-webkit-border-top-right-radius: 25px;
-moz-border-radius-bottomright: 25px;
-webkit-border-bottom-right-radius: 25px;"
align="center"
overflow:hidden;">
Content
</div>
</div>
<script type="text/javascript">
var animationObject = new AnimationObject('examplePanel');
animationObject.AddFrame(new AnimationFrame(50, 0, 210, 500, 400));
function runAnimation(animation, header) {
if(header.check) {
animation.RunBackward();
header.check = false;
}
else {
animation.RunForward();
header.check = true;
}
}
</script>
</body>
</HTML>
I just can't seem to get my code to work. Can anybody offer any help to solve this problem? I'd really appreciate it. hi....i'm trying to align some elements inthe left cell of a table that separates the two main areas of my site....table structure is as follows Code: <table height="100%" cellSpacing="0" cellPadding="0" width="100%" bgColor="#333333" border="0"> <tr> <td id="leftcell" width="267" vAlign="top" bgColor="#999999"> <div id="logo"><IMG align="right" height="266" src="images/logo-c.gif" width="256"></div> <div id="baby-foot"><A href="mailto:#">dog@the bomb.com</A> P:323-957-0572</div> <div id="maillist"><asp:textbox id="_email" Runat="server" Width="192px">Enter Email To Join Mailing List</asp:textbox><asp:button id="_join" Runat="server" Text="Join" CssClass="join"></asp:button></div> <div id="search"><uc1:sidesearch id="Sidesearch1" runat="server"></uc1:sidesearch></div> <div id="fav"><uc1:favlist id="Favlist1" runat="server"></uc1:favlist></div> </td> <td id="rightblock" vAlign="top"> <td id="rightblock" vAlign="top">....main content area...</td> and the css2 Code: #logo { BACKGROUND-IMAGE: url(../images/logo-c.gif); BACKGROUND-REPEAT: no-repeat; HEIGHT: 266px; BACKGROUND-COLOR: #000000 }
#baby-foot { PADDING-LEFT: 11px; FONT-SIZE: 11px; VERTICAL-ALIGN: top; WIDTH: 256px; COLOR: #ffffff; FONT-FAMILY: Arial, Helvetica, sans-serif; HEIGHT: 30px; BACKGROUND-COLOR: #000000; TEXT-DECORATION: none }
#maillist { PADDING-LEFT: 11px; BORDER-BOTTOM: #ff0000 1px solid; HEIGHT: 60px; BACKGROUND-COLOR: #000000 }
#search { PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; WIDTH: 256px; PADDING-TOP: 5px; BORDER-BOTTOM: red 1px solid; BACKGROUND-COLOR: #666666 }
#fav { PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; WIDTH: 256px; PADDING-TOP: 5px; BACKGROUND-COLOR: #999999 }
ok....the way it's set up now looks fine in safari and netscape (the fav and search controls push the cell beyond 256px but the right floating logo-c.gif flows with the push) however, in IE the controls are fixed at 256 and the logo-c pushes the cell a few pixels right exposing a slice of the table's back color... any suggestions for a work around? thank, b I am a bit new to CSS and am currently in the process of converting a design over to CSS2 and have run into come difficulty. I've created a list based horizontal menu and I want elements to align to both the left and right ends. Simply by adding "float:left" to most of the elements and "float: right" to others, I was able to get it to work, but strangely only in Internet Explorer, not in Firefox. The latter seems to drop my right aligned image onto the next line. For the offending code, please see: http://www.forma3.com/stuff/css/top_menu_v1.html http://www.forma3.com/stuff/css/css/right_menu_v1.css Also, any suggestions on the code would be highly appreciated. I have no doubt its more verbose than needed. For some reason, I cannot get my 2 form elements to line up as far as height is concerened. No matter what I try, one is always slightly taller than the other, even if I set both to the same height. Any ideas? Code: input[type="text"], select {
color:#888888;
font-size:10px;
height:auto;
}
I was wondering what is the best practice for aligning elements on same "line"? for example, say I have a header of the site with logo on left most side and on the right side I want to have right-aligned text with a link of a variable width, how would I achieve this? Do I need 2 separate divs that float left and have set width? Example: I am trying to put labels below images on my new site design. See: www.jwsuretybonds*com/jw09 I figured out how to get them vertically aligned, but I am having problems with the horizontal, as when I change the browser size, they move. Here is one of the examples: Code:
#homepage-bar h2.construction {
position:fixed;
top:225px;
left:505px;
}
I tried changing to position: absolute; I also tried to use percentages on the left: I know this is easy, but I can't find the fix after googling for 30 minutes. Help! Hi Guys, I am having trouble working out how to line up the hover background image with the background image for a mouseover effect. It is currently putting the hover BG image ''x.gif' over the text instead of in the same position as 'bullet.gif' HTML ---------- <div id="vertmenu"> <ul> <li><a href="#" tabindex="1">Home</a></li> <li><a href="#" tabindex="2">About Us</a></li> <li><a href="#" tabindex="3">Computing</a></li> <li><a href="#" tabindex="4">Web Sites</a></li> <li><a href="#" tabindex="5">Games</a></li> <li><a href="#" tabindex="6">Links</a></li> </ul> </div> CSS ---------- PHP Code: #navcontainer ul { list-style-type: none; text-align: left; } #navcontainer ul li a { background: transparent url(images/bullet.gif) left center no-repeat; padding-left: 15px; text-align: left; font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:14px; color:#33CC00; font-weight:bold; text-decoration: none; color: #999; border-bottom: 1px dashed #FF9933; } #navcontainer ul li a:hover { background: transparent url(images/x.gif) left center no-repeat; color: black; border-bottom: 1px dashed #FF9933; } #navcontainer ul li a#current { background: transparent url(images/x.gif) left center no-repeat; color: #666; border-bottom: 1px dashed #FF9933; } Wasn't sure if this was a CSS issue or an issue with the HTML. I am not using a DOCTYPE declaration, so that may also be the issue. I have a portion of a page where I want an image to appear. It is a static image that sits in between 2 scripts. When placed, in both IE and Firefox, there is a 1-2px white space between it and the next TD. The original code was like this: Code: <td width="144"> <SCRIPT> write_minorlinks_xml() </SCRIPT> <img src="images/site/database.gif"/> <SCRIPT> write_dblinks_xml() </SCRIPT> </td> Which makes it appear as this in either browser: I added a div into there so now it reads: Code: <div class="db"><img src="images/site/database.gif"/></div> Stats as follows: image width = 144px I've tried changing the TD, Table and Image attributes both in the CSS and in the HTML itself. No change. It is also important to show what the scripts do. You can't view it in the source but if you could, it would show up like this: Code: <td width="144"> <TABLE class="links" border="0" cellspacing="0" cellpadding="0"> <TR><TD class="minor_link"><span class="minor_link"> <a href="url" target="_top">name</a></span> </tr></td></table> <img src="images/site/database.gif"/> // </td> Also to note, the XML in the script name is in the name only. And the class "minor_link" does not exist. I am thinking that the extra space could be because of the code the scipts put in there. However, Since putting the image code into a div, I changed the background color to #FF7A7A (which is the pink color of the trailing edge of the image, which matches the border to the right of it.) As a result, Firefox now displays it as: Which is fine for cheating sake, but it still displays as the first image in IE. Here is the portion of the CSS that concerns the div (which has made no change in either IE or Firefox) Code: div.db
{
background-color: #FF7A7A;
padding: 0px;
margin: 0px;
}
Any help or ideas would be appreciated. Hi all, I have a pesky little problem that I can not seem to figure out on my own. I have a set up like this PHP Code: <span class='navitem'><a href='index.php'> <img src='myimage.gif'>Go Home</a></span> My Css Code is PHP Code: #leftnavcontent .navitem { border-bottom:1px dotted #DADADA; font-size:12px; font-weight:normal; line-height:16px; } #leftnavcontent .navitem img { margin-right:5px; border:none; } My problem is that the image is not aligning with the text. As in there is just a slight maybe 1 or 2 pixel border bottom from the image that makes it dip just above the navitem box which makes it look a little funky. Any ideas? I currently have been trying to align an h1 tag over top of a css background image. I have tried a whole bunch of things but have returned the code back to its most basic form My external css div looks as follows: #content_funny{ width: 315px; height: 51px; background-image:url(images/funnyvideos1.gif); background-repeat:no-repeat; float:left; clear:left; margin:0px 0px 0px 0; display:inline; } My index file is as follows <div id="content_header"><div id="content_funny"><a href="http://www.tokenhumor.com/categories/7/funny_videos.html"><h1>Funny Videos</h1></a></div> For some reason the text in its natural state is laying differently for IE and FF, preventing me from using any positioning lines within my external style sheet. Any help with this is much appreciated, I m pulling my hair out I'm trying to figure out how to align the text with the text so that it text starts up and to the top right of the image. And I"m talking about the top middle div. http://kansasoutlawwrestling.com/v3/index.html I have a line item where I'm pulling in text and an image from a dB. I would like the text to align at the top and not sure how to do it. Code: <li>Song name <img src="beatles.jpg"> Artist Test page: Played songs I have tried margins but then the image moves and the text is always aligned at the bottom of the image. Thanks for your help! Hi, Just upgraded my monitor and am now operating on a 1280*1024 resolution. Previous website I have built have been for 1024*768 resolutions. Problem is now that some of my images are placed at the top of the screen when I want them in the middle... not with a load of blank space beneath them. I want the blank space equally around them. Anyway, I'm specifically talking about the website I have: http://www.atari-music.co.uk The front and home-pages suffer from this problem when viewed on > 1024*768 resolutions. I have attempted to fix the problem (though it is not in the code for the on-line version) by putting this into the style sheet:- IMG.middle { vertical-align: middle; } In the HTML for the image map I have:- <IMG class="middle" src="images/home.jpg" height="570" width="760" alt="ATARI - The Official Website" border="0" usemap="#siteMap"/> Am I not referencing the CSS code correctly? The image is still sitting, vertically aligned to the top. Cheers, Rob. Hey everyone, I am trying to do a rollover CSS image. Though, with this image it doesn't want to align on the bottom of the table that it will be in. Why is this? I have no clue; so I decided to come here! With the smart people! Here is the website page that I am trying to do it on: http://www.automationfoodtech.com/test.html Here is the desire look (these are the buttons, but client wants to be able to change them himself and without me adding buttons): http://www.automationfoodtech.com/ Here is the CSS for both (the test page is at the bottom) http://www.automationfoodtech.com/style.css Remember we are working on the horizontal navigation. hey all, i have a page that has text on it and i am trying to add another div with a photo in it so that i can place the photo on the right had side and get the text to wrap around it. buti am having probs. the text doesn't wrap around the photo ... so the photo just ends up at the bottom of the text on the right... here is the code i am currently using for it Code:
#rightphoto {position: absolute; right: 10px; border: 1px solid #ccc; padding: 2px 2px 2px 2px;}
i have had various ideas but none have worked,,,,this is the latest... any ideas?? thanks RF Help, I'm trying to combine two effects I came across. The code works well but I have a problem when the image changes width. The caption box doesn't size accordingly. I tried multiple iterations for the transbox width without success. Any help would be greatly appreciated. Here is the code source: Dropshadow Image Caption Code: <html>
<style type="text/css">
div.image_wrapper img {
background-color: #fff;
border: 1px solid #a9a9a9;
display: block;
margin: -5px 5px 5px -5px;
padding: 4px;
position: relative;
}
div.image_wrapper {
background: url('_images/shadow.gif') no-repeat bottom right;
clear: right;
float: left;
margin: 0 0 0 25px;
padding: 0;
position: relative;
}
.transbox {
margin: 0;
padding: 0px;
background-color: #000;
opacity:0.6;
filter:alpha(opacity=60);
position: absolute;
top: 0;
right: 11px;
width: 95%; /*PROBLEM RIGHT HERE*/
height: 5em;
}
.image_wrapper p {
margin: 0;
padding: 10px;
color: #FFF;
position: absolute;
top: 0;
right: 5px;
font-size: 36px;
font-weight: bold;
font-family:Georgia, "Times New Roman", Times, serif;
text-shadow: 3px 3px 3px #000;
}
</style>
<body>
<div class="image_wrapper"><img src="_images/_main/HomePageGraphic.png" width="475" height="400" border="0" /><div class="transbox"></div><p>HOME</p></div>
</body>
</html>
Hi, I need some help for aligning text inside a css box. let me first say, that i am using a wysiwyg editor and i am aware of this being a red flag for some folks .... to make my problem better understandable, please see following picture - this is how i want it to be: the area of interest is a 3 column box (left and right are fixed widths, middle column is variable), the middle box (highlighted in blue) is the box, which has a background picture ('Melanie Wanders') on the top/left .... then it has some text (one looong line) and also a picture to the right (alignment: right). what i wanted is, that when the user resizes the window, that the text is able to wrap around the image on the top right - and it does exactly that (you can also view the online version here) well, what happens is this: my problem: when i try to use the 'p' tags to enter a paragraph, it messes up the appearance in FF (completely) and it still shows the text right on the top, above the background image. I also tried to align the text line to the bottom of the box, but it wouldn't do so. i did also try to have the image ('Melanie Wanders') as an actual image aligned Top/Left, but it wouldn't wanna work for me with the other image next to it. i might get it to work, if this is my only option .... finally, here the code used (you will also find the code online, if you follow the above link) Code:
.inner_middle_content_row { width: 100%; height:300px ; }
.inner_middle_content_row_left { background-image: url(images/inner_table/left.png); background-repeat: repeat-y; background-position: right 0; width:125px; height:300px; float:left; }
.inner_middle_content_row_right { background-image: url(images/inner_table/right.png); background-repeat: repeat-y; width:20px; height:300px; float:right; }
.inner_middle_content_row_middle { background-color: white; background-image: url(images/about_us/melanie_title.jpg); background-repeat: no-repeat; background-position: left top; width:auto; height:300px; margin-left:125px; margin-right:20px; }
Code: <div class="inner_middle_content_row"> <!--agl:cssobject id="inner_middle_content_row" type="Column Middle Scale" /--> <div class="inner_middle_content_row_left"> <p class="submenu_brown">Melanie Wanders</p> <p><a class="submenu_gray" href="wilhelm%20wanders.html" onmouseover="this.className='submenu_brown';return true;" onmouseout="this.className='submenu_gray'">Wilhelm Wanders</a></p> <p><a class="submenu_gray" href="philosophie.html" onmouseover="this.className='submenu_brown';return true;" onmouseout="this.className='submenu_gray'">Philosophie</a></p> <p><a class="submenu_gray" href="history.html" onmouseover="this.className='submenu_brown';return true;" onmouseout="this.className='submenu_gray'">History</a></p> </div> <div class="inner_middle_content_row_right"></div> <div class="inner_middle_content_row_middle"> <img src="images/about_us/melanie_portrait.jpg" alt="" width="160" height="180" align="right" border="0" />Chef Melanie Wanders received her Culinary Arts and Management degree .... their own hand-made chocolate company - Wanders Artisan Chocolaterie.</div> it would be great to find a solution to this - the easy way out would be to just skip the background image and have the text start right on top left .... but i like the idea of having a nice title like this - please tell me your opinion though another thing i realize is, that the whole alignment is off in IE ... this is an issue i think i have read before and it has to do with this 3px or 5px off thing in IE right? i think i will look into this some other time. Thanx for reading this - please bare with me, as my mother-language is not english and i might have expressed myself not clearly Hey guys, I'm totally new to the css thing and I'm having issues placing an image where and how i want it. If you look at my WIP here you'll see that in IE, the image of the paint brush etc. i have on the left goes beyond the div box its placed in and then into the next... how can I float it left only within the specified box so that the text flows around it in that box? Image placement is a pain, eh?... Thx! crash_x Hi: I need a simple code for displaying two things side by side. I want to attach an image of what I need to do, but I can't figure out how to attach images. Basically, to describe the image, I need to have an unordered list on the left and a graphic on the right. These need to be between to blocks of text (above and below). I would prefer not to use tables. I am assuming there is a simple way to do that using <div> and <span> and floats, but I can't figure it out. Can someone please help. Thanks. |
|||||||