|
HTML - Vertical And Horizontal Navigation Bar A Weird Text
Hi, I recently taught my self HTML and CSS so i'm still a bit shaky i started making a website to practice. i made a website with a top nav bar and a side nav bar. i can't seem to get my text to sit in the corner of both like in most websites it just seems to sit in the middle of the vertical side bar here is my HTML code and CSS code
HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Testing... 1 2 3</title> <link rel="stylesheet" type"text/css" href="CSS1.css" /> </head> <body> <h1> Testing Website </h1> <ul id="nav-list"> <li><A href=Home>Home</A></li> <li><A href=HTML>HTML</A></li> <li><A href=CSS>CSS</A></li> <li><A href=JavaScript>JavaScript</A></li> <li><A href=XML>XML</A></li> <li><A href=PHP>PHP</A></li> <li><A href=SQL>SQL</A></li> </ul> <ul id="side-bar"> <li><b>HTML Intro</b></li> <li><A href=SQL>HTML Home</A></li> <li><A href=SQL>Intro</A></li> <li><A href=SQL>Getting Started</A></li> <li><b>Basics</b></li> <li><A href=SQL>Basics</A></li> <li><A href=SQL>Elements</A></li> <li><a href=SQL>Attributes</a></li> </ul> <p> lets have a look </p> </body> </html> HTML Code: @charset "utf-8";
/* CSS Document */
body {
background-color:black;
color:white;
font-family: Arial, Helvetica, sans-serif;
}
h1 {
text-align:center;
}
ul#nav-list {
list-style: none;
margin: 0;
padding: 0;
width: 750px;
height: 20px;
}
ul#nav-list li {
display:inline;
}
ul#nav-list li a {
text-decoration:none;
padding:5px 0;
width:100px;
background: #999;
color:#fff;
float:left;
text-align:center;
border-left:1px solid #000;
}
ul#nav-list li a:hover {
background-color:#666;
}
ul#side-bar {
list-style: none;
margin:0;
padding:0;
width: 100px;
}
ul#side-bar li a {
text-decoration:none;
padding:5px 5px;
background:#999;
color:#FFF;
float:left;
width: 90px;
text-align: center;
margin-right: 20px;
}
ul#side-bar li a:hover {
background:#666;
}
p {
color:#FFF;
}
Similar TutorialsHi, i got a big problem; If you run this code in Firefox everything is ok - there is one yellow text input; But in Internet Explorer there are two red horizontal 1 pixel lines under and above text input; I have been pulling my hair since 2 days and still i dont know how to get rid of those lines?; Is this IE bug ? Please help me if you can; Thx; HTML Code: <html>
<head>
<style type="text/css">
table.myDrop-table
{
border-collapse: collapse;
background-color: red;
border-style: solid;
border-color: blue;
border-width: 0px;
border-spacing: 0px;
padding: 0px;
margin: 0px;
}
tr.myDrop-tr
{
border-collapse: collapse
border-width: 0px;
padding: 0px;
border: 0px;
border-width: 0px;
border-color: green;
padding: 0px;
margin: 0px;
}
td.myDrop-td
{
border-collapse: collapse
border: 0px;
border-width: 0px;
border-color: green;
padding: 0px;
margin: 0px;
}
input.myDrop-edit
{
border-width: 0px;
border-style: solid;
border-color: black;
background-color: yellow;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body bgcolor=white>
<TABLE class=myDrop-table cellpadding=0 cellspacing=0 border=0><TBODY>
<TR class=myDrop-tr>
<TD class=myDrop-td >
<INPUT class=myDrop-edit>
</TD>
</TR>
</TBODY>
</TABLE>
</body>
</html>
hi ! I'm using a frameset and in the main frame I need the vertical scroller visible all the time, even when not needed, but when I set it ... HTML Code: scrolling="yes" but with this the horizontal scroll is also visible, what I don't want Is there a way to enable just the Vertical one?? i have script that shown image in table, i want the table shown in horizontal not vertical this is the entire script, and the table that influence is in the red i think below any idea guys what i need to edit? Quote: # Photo Album # 1.1 # # Displays a members photos class user_photoplog_album extends z_module { # Set the maximum amount of images any users are allowed to display var $max_images = 5; function contents() { $content = $this->content; $vbulletin = $this->_zoints->external->vbulletin; # If limit hasnt been set or is over the admin set maximum, set it to the admin max if(empty($content['max_pics']) OR $content['max_pics'] > $this->max_images) { $limit_sql = 'LIMIT ' . $this->max_images; } # Otherwise, let them set it else { $limit_sql = 'LIMIT ' . $content['max_pics']; } # Get all photos the user has $getphotos = $vbulletin->db->query_read(" SELECT * FROM " . TABLE_PREFIX . "photoplog_fileuploads WHERE userid=" . $this->zuser . " AND moderate=0 ORDER BY dateline DESC " . $limit_sql . " "); $html .= '<div class="' . $this->style['pmain1'] . '" style="padding: 0;">'; # Does the user have any photos? if ($vbulletin->db->num_rows($getphotos)) { # Display the top of the table $html .= ' <table border="0" width="100%"> <tr> <td width="100" overflow-x: scroll; overflow-y: hidden; align="center" class="phead"> Image </td>'; # Display the details? if(!$content['details']) { $html .= ' '; } $html .= ' </tr>'; # loop and display all that have been fetched from the DB while($photo = $vbulletin->db->fetch_array($getphotos)) { # Display image cell $html .= ' <tr> <td width="100" align="center" class="pmain2"> <a href="' . $this->_zoints->external->url() . 'imagehosting/image' . $photo['fileid'] . '.html" target="_blank""> <img src="' . $this->_zoints->external->url() . 'imagehosting/images/' . $photo['userid'] . '/small/' . $photo['filename'] . '" /> </a> </td> '; # Display the image details? if(!$content['details']) { $html .= ' '; } $html .= '</tr>'; } $html .= '</table> <p><a href="index.php?u=' . $this->zuser . '" target="_blank">View All Photos</a> </p> <div> <p>'; } # Nope, tell them they have none else { $html .= 'You don\'t have any photos. <a href="upload.php" target="_blank">Upload photos now!</a>'; } $vbulletin->db->free_result($getphotos); $html .= '</p> </div>'; return $html; } function update($content) { return $content; } function edit() { $content = $this->content; if($content['max_pics'] AND $content['max_pics'] < $this->max_images) { $limit = htmlspecialchars($content['max_pics']); } else { $limit = $this->max_images; } $html .= '<div class="pmain1">'; # Disable description checkbox $html .= 'Disable image details? '; $html .= '<input type="checkbox" name="mod[content][details]" ' . ($content['details'] ? 'checked="checked"': '') . ' /> <br />'; # Max pictures textbox $html .= 'Max pictures to display '; $html .= '<input type="text" name="mod[content][max_pics]" value="' . $limit . '" size="5" /> '; $html .= '<span style="font-size: 7pt; color: #848484;">(max ' . $this->max_images . ' allowed)</span> '; $html .= '</div>'; return $html; } } OK - I want you you to know, I don't know what I'm doing. But I'm trying to build my web site and I'm just about there but am having one problem. The problem page is he http://www.danielrubio.com/clientlogin.html and he http://www.danielrubio.com/listeningroom.html I can't get the navigation area on the left to occupy the same vertical position as the login form. With the second page I can't get the navigation area on the left to occupy the same vertical position as the links to my MP3's. The reason I set things up this way to start with was to keep the form and the links centered on the page no matter what size window or screen resolution. Here is the code for the first problem page: HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="JavaScript">
function Login(){
var done=0;
var username=document.login.username.value;
username=username.toLowerCase();
var password=document.login.password.value;
password=password.toLowerCase();
if (username=="luckydog" && password=="sunshine") { window.location="http://www.danielrubio.com/heidi/juliexyz.html"; done=1; }
<!-- The user above is Julie Rubio 070216 -->
if (username=="bighands" && password=="hardwork") { window.location="http://www.danielrubio.com/guest/12345678.html"; done=1; }
<!-- The user above is Guest 070216 -->
if (username=="member1" && password=="password1") { window.location="page1.html"; done=1; }
if (username=="member2" && password=="password2") { window.location="page2.html"; done=1; }
if (username=="member3" && password=="password3") { window.location="page3.html"; done=1; }
if (done==0) { alert("Invalid login!"); }
}
// End -->
</script>
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1">
<meta name="keywords"
content="daniel rubio, composer, orchestrator, tuba, new orleans, last days, derringer, sidewalk, second line, music, bmi, garritan, dixieland, theater, jazz, bourbon, imdb">
<meta name="robots" content="index, follow, noarchive">
<meta name="description"
content="Daniel Rubio is a composer and orchestrator for theater film and television from New Orleans and a tuba player">
<title>DANIEL RUBIO</title>
</head>
<body
style="color: rgb(0, 0, 0); background-color: rgb(192, 192, 192); height: 646px;"
alink="#000099" link="#000099" vlink="#990099">
<table
style="text-align: left; font-family: Helvetica,Arial,sans-serif; background-color: transparent; width: 100%; height: 100%;"
border="0" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td colspan="2" rowspan="1"
style="text-align: center; width: 100%; height: 96px;"><big><big><big><span
style="font-weight: bold;"> </span></big></big></big>
<h1 style="font-weight: bold; height: 25px;">D <small>A
N I E L</small> R <small>U B I O</small></h1>
<big><big><big><small><small>Composer
| Orchestrator</small></small></big></big></big></td>
</tr>
<tr>
<td colspan="2" rowspan="1"
style="width: 100%; height: 108px;"> <big><big><big><img
style="position: absolute; width: 108px; height: 144px; top: 57px; left: 96px;"
alt="Photograph of Daniel Rubio"
src="../../photogs/DanBW45a.jpg"></big></big></big><font
size="+1"> </font>
<div style="text-align: center; margin-top: 0px; height: 92px;"><font
size="+1"><span style="color: rgb(51, 51, 51);"></span></font><big><span
style="color: rgb(51, 51, 51);"><big><small><small><small><br>
<br>
<big><big><big>C</big>LIENT <big>L</big>OGIN<br>
<br>
<br>
<br>
<br>
</big></big></small></small></small></big></span></big><big><span
style="color: rgb(51, 51, 51);"><big><small><small><small><big><big>
<center>
<form name="login">
<table style="width: 225px;" border="1"
cellpadding="3">
<tbody>
<tr>
<td colspan="2"> <br>
<div ="">
<center><font size="+2"><b>Welcome!</b></font></center>
</div>
</td>
</tr>
<tr>
<td>Username:</td>
<td><br>
<div style="z-index: 2;"><input
name="username" type="text"></div>
</td>
</tr>
<tr>
<td>Password:</td>
<td><input name="password" type="text"></td>
</tr>
<tr>
<td colspan="2" align="center"><input
value="Login!" onclick="Login()" type="button"></td>
</tr>
</tbody>
</table>
</form>
</center>
</big></big></small></small></small></big></span></big></div>
</td>
</tr>
<tr style="color: rgb(51, 0, 153);">
<td
style="vertical-align: top; text-align: center; width: 20%; background-color: rgb(153, 153, 153); height: 337px;"><small><big><big>
</big></big><br>
<a href="http://www.danielrubio.com/index.html">Home</a><br>
<br>
<a href="http://www.danielrubio.com/clientlogin.html">Client
Login</a><br>
<br>
<a href="http://www.danielrubio.com/listeningroom.html">Listening
Room</a><br>
<br>
<a href="http://www.danielrubio.com/biography.html">Biography</a><br>
<br>
<a href="http://www.danielrubio.com/news.html">News</a><br>
<br>
<a href="http://www.danielrubio.com/links.html">Links</a><br>
<br>
<a href="http://www.danielrubio.com/sitemap.html">Site
Map</a><br>
<br>
<a href="http://www.danielrubio.com/feedback.html">Feedback</a></small></td>
<td style="text-align: center; width: 80%; height: 337px;"><br>
<div style="position: absolute; left: 240px; top: 377px;"><span
style="font-weight: bold;"><span
style="color: rgb(0, 0, 0);"></span> </span><br>
<span style="font-weight: bold;"></span></div>
</td>
</tr>
<tr>
<td colspan="2" rowspan="1"
style="text-align: center; width: 100%; background-color: rgb(153, 153, 153); height: 96px;"><span
style="font-family: Helvetica,Arial,sans-serif; font-weight: bold;">Copyright
© 2006 - </span><span
style="font-family: Helvetica,Arial,sans-serif; font-weight: bold;">2007
by </span><a
style="font-family: Helvetica,Arial,sans-serif; font-weight: bold;"
href="http://www.danielrubio.com/feedback.html">Daniel Rubio</a><span
style="font-family: Helvetica,Arial,sans-serif; font-weight: bold;">.
All worldwide rights reserved.</span><br
style="font-family: Helvetica,Arial,sans-serif; font-weight: bold;">
<span
style="font-family: Helvetica,Arial,sans-serif; font-weight: bold;">Second
Line Music™ is a trademark of Daniel Rubio.</span><span
style="font-family: Helvetica,Arial,sans-serif; font-weight: bold;"><br>
</span></td>
</tr>
</tbody>
</table>
<span style="font-family: Helvetica,Arial,sans-serif;">
</span>
</body>
</html>
I think that if you help me to understand the correct approach to the first page, I can then apply it to the second page. Thanks for any help, Dan Hello all, The team I work on is going to be creating a .NET application which reads organization information from a database and creates a dynamic Org Chart. One of common features in an org chart is lines that show reporting structures. Does anyone have any recommendations on how we could dynamically create such lines that would need to go both horizontally and vertically? Thanks Hello All, With building a nested vertical navigation element, I am using "onmouseover" and "onmouseout" behaviors with some CSS. The problem I have is that, for people who have a hard time clicking quickly on the left side vertical navigation submenu elements, sometimes they mouse out before they click when the mouse is over the element. I made the onmouseover area larger than the actual sub-entries, which helps, but is not good enough. What I want to do: Somehow prolong the onmouseover event to allow maybe 1.25 seconds of onmouseout before the submenu disappears, or slow down the onmouseout for the same reason. Anyone have any ideas? Thank you, edsager P.S. I include some of the relevant code below. HTML stuff: Code: <ul> <li onmouseover="this.firstChild.style.display="block"" onmouseout="this.firstChild.style.display="none""><ul class="popout"> <li class="popout"><a class="popout" href="orig_flood.html">Stuff111111111</a></li> <li class="popout"><a class="popout" href="title.html">Stuff11111111</a></li> <li class="popout"><a class="popout" href="appraisal.html">Stuff1111111</a></li> <li class="popout"><a class="popout" href="AVM.html">Stuff111111</a></li> <li class="popout"><a class="popout" href="BPO.html">Stuff11111</a></li> <li class="popout"><a class="popout" href="orig_fraud.html">Stuff1111</a></li> <li class="popout"><a class="popout" href="lien.html">Stuff111</a></li> <li class="popout"><a class="popout" href="orig_tax.html">Stuff111</a></li> </ul><a>Home</a></li> CSS stuff: Code: @charset "utf-8";
/* CSS Document */
#services a
{
display: block;
height: 100%;
cursor: default;
}
#services li:hover
{
color: #999;
border: 1px solid RGB(179, 179, 179);
background-color: RGB(230, 230, 230);
}
#services a:hover
{
color: #666;
}
#services ul.popout
{
white-space: nowrap;
width: auto;
position: absolute;
left: 180px;
background-color: white;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
z-index: 5;
display: none;
border: 1px solid RGB(179, 179, 179);
}
#services li.popout
{
margin: 0px;
padding: 0px;
height: auto;
font-size: 10pt;
font-weight: normal;
color: #666;
}
#services a.popout
{
padding: 5px;
padding-left: 15px;
padding-right: 15px;
display: block;
height: 100%;
}
#services a.popout:hover
{
color: #333;
background-color: RGB(230, 230, 230);
cursor: pointer;
}
Hi all, Graphic designer here hell bent on learning web design with a question probably asinine for all those viewing but vexing to me for the last week. I have a site beautifully designed (can be seen here as a static jpeg) and seemingly straight forward and basic but making it functional on the web as I designed is proving to be quite the arduous task. I have many questions concerning this project but I'll keep this thread focused on the code for positioning images on the navbar. I have the buttons (67px by 14px) and sidebar (36px by 594px) all measured out and have tried a few different semantics to accomplish this but all for not. The images always end up stacking in the top left corner. HTML Code: <body>
<div id="butttons">
</div>
<div id="nav">
<img src="images/layout/images/Side_nav.png"/>
</div>
<div id="butttons">
<div id="nav_Home">
<img src="images/layout/images/Home.png"/>
<div id="nav_Portfolio">
<img src="images/layout/images/Portfolio.png"/>
<div id="nav_Contact">
<img src="images/layout/images/Contact.png"/>
</div>
</body>
And then this is the Refferenced style sheet HTML Code: #nav {
position: absolute;
top: 0px;
left: 0px;
}
div.nav_side {
background-image: url(images\layout\Side_nav.gif);
background-repeat: no-repeat;
background-position: top center;
width: 36px;
height: 594px;
}
#buttons {
position: absolute;
background-repeat: no-repeat;
background-position: top center;
top: 500px;
left: 36px;
}
.nav_home {
background-image: url(images\layout\Home.gif);
background-repeat: no-repeat;
background-position: top center;
position: absolute; top: 552; left: 35;
width: 67px;
height: 14px;
}
.nav_Portfolio {
background-image: url(images\layout\Portfolio.gif);
background-repeat: no-repeat;
background-position: top center;
position: absolute; top: 566; left: 35
width: 67px;
height: 14px;
}
.nav_Contact {
background-image: url(images\layout\contact.gif);
background-repeat: no-repeat;
background-position: top center;
style="position: absolute; top: 580; left: 35;"/>
width: 67px;
height: 14px;
}
I literally just started learning Html /CSS / Java a month ago; spare no details! ANY help with ANY (text formatting, background gradient that adjusts relative to a screen size, rollovers on the nav etc...) part of putting this site together will be more appreciated then most can fathom. I'd be willing to exchange some graphic work if any of you stuck this out to the end with me. Hello Folks, I'm currently redesigning my site and am having a problem with the last bit! I know that CSS is the method of choice now for web design but I need to integrate my site with a commercial shopping cart called Actinic. This uses tables and is virtually impossible to rewrite using CSS. It makes for a seamless integration if I stick with tables for my part of the site, and less headaches trying to make the two sites look the same. I want to move some of the links away from the left hand column on the page and put them into a horizontal bar at the bottom. I've created a tile which repeats, but I want it separated a bit from the left hand column. Here's a url so you can see what I'm on about. http://www.magicalwonders.com/NewLook/Index.html You will see that the blue bar created by my tile is stuck to the side of the left hand column. My problem arises in trying to move this bar to the right of the left hand column, so that there is a gap between the two. I was hoping to avoid using a full size graphic as I want to keep the file size to a minimum. I've tried Cell Spacing & Padding which doesn't have any effect, so I've tried putting the background tile in between Div tags and specifying a width using the following code:- <td align="center" ><Div width=300px id="footerbackground">Some links go Here</Div></td> This hasn't worked though and the tile fills up the entire width of the cell that the Div is in. I would be grateful if anybody can offer any advice. Many thanks, Myles yea, i know it makes me sound like the biggest noob ever but i am so ive put together a few pages with nothing but a list in <ul> tags and i somehow managed to make them horizontal, but now...i want it to be vertical and ive gone over every single line and not been able to work it out so i was hoping maybe you guys could help me out heres the css.... Code: body {
background-color: #e3e3db;
background-image: url(bg.gif);
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: left;
margin: 0;
padding: 0;
}
#menu {
}
#menu li {
float: left;
height: 28px;
margin: 0 5px 0 0;
white-space: nowrap;
}
#menu li strong, #menu li a {
float: left;
height: 22px;
padding: 6px 16px 0 22px;
background-repeat: no-repeat;
background-image: url(tabs.png);
background-position: -10px -28px;
color: #FFFFFF;
font-weight: normal;
text-decoration: none;
/* hide overflowing text */
max-width: 290px;
overflow: hidden;
text-overflow: ellipsis;
}
#menu li span {
float: left;
height: 28px;
width: 6px;
background-repeat: no-repeat;
background-image: url(tabs.png);
background-position: -4px -28px;
}
#menu li.selected strong, #menu li.selected a {
background-position: -10px 0;
color: #000000;
font-weight: bold;
}
#menu li.selected span {
background-position: -4px 0;
}
#menu li:hover strong, #menu li:hover a {
background-position: -10px -56px;
}
#menu li:hover span {
background-position: -4px -56px;
}
#menu li.selected:hover strong, #menu li.selected:hover a {
background-position: -10px 0;
}
#menu li.selected:hover span {
background-position: -4px 0;
}
-thanks in advance Hi, I have got a weird problem with a page I'm writing: whenever I zigzag between my tabs inside the page, each tab's content moves a little bit to the right. you can clearly see it, if you zigzag between the "Friends" tag and the "Mail" tag, and notice how the title of the content moves a little bit to the right each time... I'm attaching my two files. Does anyone has an explanation? Thanks hello all, I found a simple effect that make the text scroll vertical which it's prefect for my website. Code: <div align="center"> <marquee scrollamount="2" direction="up" loop="true" width="35%"> <center> THIS IS COOL </center> </marquee> </div> the thing is, how can I make it stop on RollOver / hover I have a mobile application and the text is top aligned in the Blue division rather than centered: <div class="header"> <span style="">TREO 600 LITIGATION</span> </div> Not sure what to put in the Span tag. .header { height: 2.0em; background-color: blue; text-align: center; color: white; font-weight: bold; } And I am viewing this as a Mobile application on an iPhone. Todd Hello everyone, would someone please help me with just vertically centering the text within the box that says "This page was last updated on Monday, May 16, 2011 @ 10:39 AM" it's for my site located @ http://www.trillionaireme.com Here is my CSS code: Code: body {background-color:#ffffff;border-style:solid;border-width:5px;border-color:gray;border-bottom-color:#ffffff;border-left-color:#ffffff;border-right-color:#ffffff;}
h1 {background-color:#f5f5f5;font-size:17px; color:grey; font-family:arial;word-spacing:30px;text-align:center;}
h2 {font-size:17px; color:grey; font-family:arial;word-spacing:30px;text-align:center;}
p {font-size:11px; color:grey; font-family:arial;}
p.bordertop {border-style:solid;border-width:5px;border-color:gray;border-top-color:#ffffff;border-left-color:#ffffff;border-right-color:#ffffff;}
p.borderbottom {border-style:solid;border-width:5px;border-color:gray;border-bottom-color:#ffffff;border-left-color:#ffffff;border-right-color:#ffffff;}
IMG.displayed {display:block; margin-left:auto; margin-right:auto;}
a:link {color:grey; text-decoration:none;}
a:visited {color:grey; text-decoration:none;}
a:hover {color:#c0c0c0; text-decoration:none;}
a:active {color:#c0c0c0;text-decoration:none;}
div.page {width:920px;padding:0px;border:0px;margin:0px auto;}
div.logo {width:200px;padding:0px;border:0px;margin:0px auto;}
div.topleftbox {width:250px;height:250px;padding:0px;border:1px;border-style:solid;border-color:#dcdcdc;position:relative;top:20px;left:1px;font-size:11px;color:grey; font-family:arial;}
div.topmiddlebox {text-align: center;width:375px;height:25px;padding:0px;border:1px;border-style:solid;border-color:#dcdcdc;position:relative;top:-15px;left:270px;font-size:11px;color:grey;font-family:arial;text-align:center;margin-}
div.toprightbox {width:250px;height:250px;padding:0px;border:1px;border-style:solid;border-color:#dcdcdc;position:relative;top:-15px;left:394px;font-size:11px;color:grey;font-family:arial;text-align:right;}
My html code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><title>TrillionaireMe</title><link rel="shortcut icon" href="images/trillionaireme.ico"> <head><link rel="stylesheet" type="text/css" href="trillionaireme.css" /></head><body> <h1> </h1><div class="logo"><a href="http://www.trillionaireme.com"> <img class="displayed" src="http://www.trillionaireme.com/images/trillionaireme.jpg" width="196" height="233" border="0" /></a></div> <h1> </h1> <p class="borderbottom"> </p> <div class="page"><h2> <a href="http://www.trillionaireme.com/fitness.html">Fitness</a> <a href="http://www.trillionaireme.com/nutrition.html">Nutrition</a> <a href="http://www.trillionaireme.com/money.html">Money</a> <a href="http://www.trillionaireme.com/relationships.html">Relationships</a> <a href="http://www.trillionaireme.com/parenting.html">Parenting</a> <a href="http://www.trillionaireme.com/music.html">Music</a> <a href="http://www.trillionaireme.com/literature.html">Literature</a> <a href="http://www.trillionaireme.com/you.html">You</a> <a href="http://www.trillionaireme.com/them.html">Them</a> <a href="http://www.trillionaireme.com/vision.html">Vision</a></h2> </div> <div class="page"> <div class="topleftbox">This is the top left box. <div class="topmiddlebox">This page was last updated on Monday, May 16, 2011 @ 10:39 AM <div class="toprightbox">This is the top right box. </div></div></div></div> </body></html> i want to space out my text a bit more, i think it's too close together but i dont' know how to fix it, please help! http://leilanimunter.com/news.htm THANK YOU!!! Hi, I just thought I'd jump right in with my query. I'm looking to make Text in a table cell vertical, I've come up with solution of inserting <br />'s after each letter <table> <tr><th class="green">O<br />n<br />e</th> <th>Two</th> <th>Three</th></tr> </table> but I just wanted to know, is there a way of achieving this without doing this, can I control the size of the cell with css? thanks htmlhex hi i am new to HTML, but a quick learner. i am really stuck though.....i am trying to change the font and size on a simple paragraph on my website.....here is the HTML i put in <p align=center> <font size="4" face="century gothic" > ********** my text ********* l</font> but now the lines in the paragraph are really squished together vertically......is there a HTML code i am missing to add in here is a link to see what it looks like.....http://www.cocosshoppe.com/store/eco...?idCategory=76 Please find it in your really smart hearts to help me ;J I've got a line of text that includes some IMG tags. The images are 23 pixels high and the text is about 16 pixels high. So the IMGs increase the height of the line. Normally, Text and IMGs are aligned to "the bottom", so that the IMGs are much taller than the text. I could increase the size of the text so that it was as tall as the IMGs, but I'd rather not. I want the text to be vertically aligned to the "middle", so that the line looks better. Is that possible? How I can set the scrool bar so that the vertical bar will show? When the typed text exceeds the horizontal space area, cursor will be moved into next line without hitting the Enter key. Hi everyone, I am working on a table for a future website and I need some help. I need to make the text at the top vertical, as in taking the word and turning it 90 degrees to the left. The best way for me to explain this is to show u the problem/test page. http://aquariachat.com/bigchangesare...chartfeb23.php I am making the chart/table in a simple html editor if that information is of any use. Thanks a lot, Drew Hi, I'm learning about horizontal lists. I'm trying to position a string ("Stuff" in the code snippet) a given distance (say 100px) to the right of the last item in a horizontal list, on the same line as the list. How do I do this? The following code snippet, using CSS for the UL and LI tags with a WIDTH specification for the UL tag, results in a BREAK between the last list item and the string "Stuff", as shown below: ------------------------------------------------------------------------------------------------------- Books Posters Stuff. ------------------------------------------------------------------------------------------------------- Code Snippet: Code: <HTML>
<HEAD>
<STYLE>
li {
float: left;
padding-right: 32px;
padding-left: 32px;
}
ul {
list-style-type:none;
width=300;
}
</STYLE>
</HEAD>
<BODY>
<UL><LI>Books</LI><LI>Posters</LI></UL>
Stuff.
</BODY></HTML>
In fact the only way to not have a BREAK between the last list item and the string "Stuff" is to remove the WIDTH specificaton from the UL tag altogether, but then the string "Stuff" cannot be positioned a given distance to the right from the last list item--it just goes the default distance. So how can text trailing a horizontal list be positioned a specific distance to the right of the horizontal list on the same line? Thanks very much for any help you can provide. Thanks, Dave |
|||||||