|
HTML - Aligning A Banner With A Heading
Hello,
I am new to web design and am just learning the basics right now. I am trying to have an ad banner show up to the right of the main heading for my site. What would be the best way to have these two show up side by side within the same div box? Is there a way to turn off the line break that naturally occurs with headings? Thanks for your suggestions in advance! Here is some of the code I am working with: Code: <div class="heading"> <h1><a class="header" href="home.htm">Plotbound.com</a></h1> <script type="text/javascript" src="http://x10hosting.com/adserve.js?kaoticja"></script> </div> And the CSS: Code: div.heading
{
background-color: #ffffff;
border-bottom: 3px ridge #000000;
border-left: 3px ridge #000000;
margin-bottom: 10px;
}
- Jack Similar TutorialsJust so you know I am new to all of this stuff. I have been arranging a web site for myself, as a project to learn from. I made myself a nice title/banner picture for my site and would like to align it to the very edge of the page(top/left/right). There are a few PX as a boarder, this is what I DO NOT want. I have it as a larger sized image then I'm displaying at the moment. And was hoping that I might be able to have it stay aligned at all times( If user changes the window size, or their window is large or small, etc.), and have this image be "fixed" at the top (there no matter how far down the user scrolls). I do not know if this should be in the .html or in the .css portion of my page, at the moment it is in the .html . ***A close example of what I want would be the top of htmlforum.com. The title banner boarders the entire top edges of the frame... except the "pic" does not go across the entire top, and the banner stays at the top.*** the code I'm using at the moment is: <img src="http://naluolapa.com/images/Titlepic2.jpg" width="1024px" height="126" alt="title banner, nalu olapa's domain" align="top" > This is a link to what I'm talking about and working on: http://www.naluolapa.com/home/HTML-2.html (yes, I do know that the page is full of errors in the displayed text, I'm more focused on the looks and style then the content at the moment.) I have google-ed many sites, and used lots of different sources for codes. Though none gave me what i want. so I decided to post on here, after looking through many threads too. Thanks for your time! I started a blogger blog a few months ago with a 2-column template. Yesterday I decided to add a 3rd column. I have never done anything with html before and I tried to write the code for the 3rd column from scratch. It appears it worked out ok, but now for some reason the banner on the top is way left. I cannot figure out what to do to the code to center the banner. If anyone could help I would appreciate it. The URL is http://notqualifiedtocomment.blogspot.com/ Thanks again! I started a blogger blog a few months ago with a 2-column template. Yesterday I decided to add a 3rd column. I have never done anything with html before and I tried to write the code for the 3rd column from scratch. It appears it worked out ok, but now for some reason the banner on the top is way left. I cannot figure out what to do to the code to center the banner. If anyone could help I would appreciate it. The URL is http://notqualifiedtocomment.blogspot.com/ Thanks again! So here goes: i have to make a heading for my web page (that has to be made using html) and it has to be: -centered -times new roman -and font size 6 -bold .... is this right? or am i suppose to somhow use those <h1> tags. <!--heading--> <div id="header" align="center" style="z-index:5"> <b><font color="#ffffff" size="6" face="Times New Roman">My heading</font></b> </div> <!--end heading--> ....okay and another one: how do i put an image behind the text. i know how to put a coloured block behind it, but when i try to put an image behnd the heading, the text goes behind the picture.... i did it like this: <!-- Heading --> <div id="header image" align="center" style="top: 0px; left: 9px; position: absolute; z-index: 4; width: 1239px; height: 58px"> <img src="background.png" width="1245" height="61" alt="header"> </img> </div> <!-- Heading --> please hepl?!?!? this issue has been solved Hi: I wish to place a heading in the middle of a horizontal line (i.e., maybe using <hr /> ??) at various places in my page. That is, I would like a line in my page to look like: ----------------------------------- NOTICES --------------------------------------- How can I do this please ? Thanks, -Mel Smith I have made a box mostly from 3 divs a top middle and bottom, when I add any h1 element makes a gap between the top and the middle killing the box effect in FireFox. I have tried everything with this but now give up, does anyone have any ideas on how to fix this. I have added a another div called maincontentinner so that the text was easier to adjust but even removing this did not solve it. All I am trying to do is get rid of the tables layout and have hit a brickwall my html HTML Code: <div class="mainboxtop"></div>
<div class="maincontent">
<div class="maincontentinner"><!--All content starts here-->
<h1> More Information</h1>
this is a test
</div><!--All content stops here-->
<div class="mainboxbottom"></div>
</div><!-- /closing of maincontentdiv -->
the CSS Code: .maincontent {
background:#CFCFCF url(../images/contentmain.gif) repeat scroll 0%;
border:0;
width:710px;
}
.maincontentinner {/*added to give padding inside the box and a few other styles*/
padding-left:15px;
padding-right:15px;
font-size:1.2em;
}
.mainboxtop {
background:#CFCFCF url(../images/contenttop.gif) no-repeat scroll 0%;
border:0;
height:26px;
margin:0;
padding:0;
width:710px;
}
.mainboxbottom {
background:#CFCFCF url(../images/contentbottom.gif) no-repeat scroll 0%;
border:0;
height:26px;
width:710px;
}
Here's a test page to see it for real Hi everyone, I'm sure there's a simple answer to this one but I can't work it out. I have a heading <h1>Services</h1> and want to align some text next to this, not below it. <p>blah blah blah</p> places the text below. What would align the text directly to the right of the heading? Many thanks Phil I have created a image background for the heading by writing index. but when i run on my machine i can see the image. where as after placing on the web sever i couldn't see the image. please do help me in this regard. <style type="text/css"> img.b { position:absolute; left:440px; top:10px; z-index:-1 } </head> <BODY> <form name='app'> <h1 align="center"><b>aduit application</b></h1> <img class="b" src="dock1.gif" width="380" height="60"> My website home page has no h1 tag, only a h3 tag, and that was used to create a heading of a certain font size. My spider simulator reports there in no h1 tag, suggesting that isn't good for SEO. Should I make sure there is a h1 tag somewhere, and can that be anywhere on the page? (It's not a heading as such). I want a certain sentence to be the h1 tag as it contains several of the keywords. Can I make these changes and dump the h3 tag, leaving only one h1 tag? And can it be done locally rather than in a css file? My website uses the Woo Canvas theme in Wordpress. Hello everybody, As you can see here http://arturbuchhorn.com/index.html the h2 element is displayed right alongside the navigation. What would be the best way to move the heading below the navigation? Thank you. PS: I would prefer a CSS solution if possible. The code is right he Code: /*
CSS for Un Buchhorn en route
*/
a:visited {
color: black;
}
#sitebranding a {
border: 3px solid white;
padding: 20px 10px 20px 10px;
}
#sitebranding a:hover {
background-color: #FFE4C4;
}
#tagline {
margin: 2em 0 1em 0;
}
#navigation {
}
#navigation ul li {
list-style-type: none;
float: left;
margin: 0px 5px 0px 0px;
}
#navigation ul li a {
background-color: #FFE4C4;
text-decoration: none;
border: black 1px solid;
border-bottom: none;
padding: 0 10px 2px 10px;
}
#navigation ul li a:hover {
background-color: #F5DEB3;
}
#navigation ul li a:visited {
}
#bodycontent {
}
body {
font-family: Calibri, Arial, Verdana, sans-serif;
background-color: #F5DEB3;
}
#essay {
text-align: justify;
margin: 0 15% 0 15%;
}
#worksList ul {
margin: 3em 0 3em 0;
}
#worksList ul li {
list-style-type: square;
line-height: 200%;
}
#worksList ul li a{
text-decoration: none;
}
#footnotes {
font-style: italic;
text-align: left;
}
h1 {
font-family: "Jayne Print";
font-size: 200%;
}
h1 a {
text-decoration: none;
}
h2 {
font-size: 125%;
font-weight: normal;
}
#footer p {
font-size: 60%;
font-family: Arial;
font-style: italic;
}
#adsense {
position: absolute;
right: 0;
top: 5%;
}
#pagedoesnotexist p {
margin: 20% 20% 20% 25%;
color: red;
font-size: 125%;
}
I'm having trouble with a header in IE. I'm a beginner but modifying a webpage. I have a header that when opened in Firefox or Chrome stretches normally across a page, e.g. "This is the header" However, when I open the same page in IE, I'm getting one word per line, e.g. "This is the header" Does anyone know how to resolve this please? I'd be very grateful for any help Hey guys! It's been awhile, but life has been busy and doing new things with web pages hasn't been on the top of my list. However, I've run into a small issue which will hopefully be easy to solve. I've been doing some scripting for a program which exports and imports scripts in an XML setup. I've been posting those scripts on another site, and, for now, have been instructing users to simple right+click save as... the scripts in order to get them, because, when they click on the link, it tries to bring them to a page of the XML. Is there any way for me to tell the links to simply download the XML file (effectively like right+click save as... except it will go to wherever they download stuff) if it is clicked? Hello, I ran into this problem today in my Basic XHTML class, and it was enough to stump me and the instructor: if you want to put an unordered list in the middle of a page, but you want the list items to be left-aligned so the bullets are one on top of the other...how do you do it? I started with code something like <div align="center"> <ul type="disc"> <li>Wine</li> <li>Women</li> <li>Song</li> </ul> </div> This centers the list on the page, but it also centers each list item. I tried placing a <div align="left"> around the list items, individually and collectively, but depending on the positioning it either had no effect or it nullified the center attribute completely and gave me a left-aligned list on the left edge of the page. Attempts to change the style of the <li> tag, which I haven't done in months and was never all that good at, failed. I know I can do this in ten seconds by putting the list inside a one-cell table, and with much fiddling I could probably do it with a spacer GIF...but what's the 1.0 Strict way? Hi everybody I am a new member. I'm not to experienced with css style sheets or html and have a small problem. I have attached code. My website is www.intelligentstudentfinance.com I want to move the banner at the bottom of the financial aid page to the extreme right but not sure what the code is. I have attached the code in txt format and commented the banner I want want moving to the right. Look forward to your replies Thanks My site is: h1.ripway.com/shsepac How can I make the banner so there is no space at the top and at the bottom? Hey, i have a problem with my banner(logo) I want the banner to be at the top, not underneath it. I want it to be centered and at the top, stuck to the border or something, like at http://habblogg.net, here is my site http://habbxtra.net Please help anyone I'm trying to set the following banner up on my site but when I paste the code at the end of the page the banner keeps appearing at the top of the page. Can anybody explain why? <div style="z-index: 110; position: absolute; width: 468px; font-family: arial,sans-serif; background: url("http://outils.acf-webmaster.net/bann...2482.gif") repeat scroll 0% 0% transparent; height: 60px; color: rgb(255, 255, 255); font-size: 12px; top: 26px; left: 34px;"> <div style="position: absolute; line-height: 110%; width: 200px; top: 1px; left: 55px;"> <font xmlns="http://www.w3.org/1999/xhtml"><font xmlns="http://www.w3.org/1999/xhtml"> <font size="1px;"> <strong> <font face="Verdana"> 280 different <a style="color: rgb(255, 255, 2); font-size: 10px;" href="http://www.casinoriva.com/en/" target="_blank">online casino</a> games await for you. </font> </strong> </font> </font></font></div> </div> Hi... In some time I have tried to figure out how to put a banner underneath the red ruler in my myspace profil. I have onlly been able to find a code for putting it on the very top of the site as you kan see on my page: Kasper I would like to have it underneath the red ruler just like it is on this site: www.myspace.com/theasteroidsgalaxytour Does anyone know the code I should use or what I should do? Kasper P.S. Hope you like my music. I'm creating a banner for the top of my web site whose layout looks roughly like this: http://farm4.static.flickr.com/3098/...d89112.jpg?v=0 I created a div and put a table in it to make these divisions, but there's one problem. There is space between the cells of the table and the div. Padding and margins are set to 0 all around, as well as the table's cell padding. Here's the relevant html: Code: <div class="banner">
<table cellpadding="0">
<tr>
<td><img src="assets/images/IMG_0632f.jpg" width="375px" /></td>
<td>
<table border="1" width="375px">
<tr>
<td colspan="3" height="50px"> THE J-SLICE</td>
</tr>
<tr>
<td><img width="75px" height="50px"/></td>
<td><img width="75px" height="50px"/></td>
<td><img width="75px" height="50px"/></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
and the CSS for the div: Code: div.banner {
padding: 0px;
margin: 0px;
background-color: black;
border: 1px solid red;
color: red;
}
I'd really like to get the edges of the table right up against the div, and if possible, get the two tds of the main tr directly adjacent as well. Thanks. |
|||||||