|
CSS - Enforcing Text To 'stay' Inside Of Box
hi,
is there any way to keep the text inside of a box, when narrowing a browser window - OTHER than to specify a minimum width? ideally i would like to have a window expand to the bottom - i have a feeling that it doesn't work though. i mean, a box can expand sideways, why not vertically as well? this is the test page i am talking about. i would love to keep the text (and the images) inside the box at all times, without specifying a min-width. it would make the whole design eligible for any screen resolution. thanx for reading Similar TutorialsIssue is I've got text that I want in a certain place on the page. I've run into this situation time and time again, thankfully I've always worked out a creative solution, however I've just been avoiding the problem. It's not something I can use center, or bottom or anything like that on. I've got an image that's in sort of an odd position on the page. I want to have a link directly centered under that image but I can't seem to get the text where I want it. Any suggestions? Like when I make a field.. <fieldset> <fieldset> How can I then make something like, when typing in <text> it'll stay in a locked field. And when clicking "Save" it will send the text to my email? Please help. Would be really cool with a code below. http://www.students.niu.edu/~z162609/asme.html That is my website. As you can see on the left the link box changes with the actual text in the main box. The text goes down as the text on the main content box gets bigger. I am very new to CSS and really do not know anything. I am fairly sure this is a one line fix. However, I really need this and would appreciate any help. Code:
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif;text-align:center}
p{margin:0 10px 10px}
a{padding:5px; text-decoration:none; color:#000000;}
div#header{background-color:#F3F2ED;}
div#header h1{height:80px;line-height:80px;margin:0;padding-left:10px;}
div#container{text-align:left}
div#content p{line-height:1.4}
div#navigation{background:#F6F0E0;}
div#navigation ul{margin:15px 0; padding:0; list-style-type:none;}
div#navigation li{margin-bottom:5px;}
div#extra{background:#CCC8B3;}
div#footer{background:#BFBD93;}
div#footer p{margin:0;padding:5px 10px}
div#container{width:700px;margin:0 auto}
div#wrapper{float:left;width:100%}
div#content{margin: 0 150px}
div#navigation{float:left;width:150px;margin-left:-150px}
div#extra{float:left;width:150px;margin-left:-700px}
div#footer{clear:left;width:100%}
Is there any way to make some text vertically aligned inside a DIV? Just like you would do inside a cell? Code: <table><td valign="middle" height="100">This text is vertically aligned</td></table> Apparently, the vertically-align CSS property only works if it is relative to other DIVs. What I want is some vertically aligned text inside a DIV. Thanks for the help. I am using a Body{...} style on my page (background set to black #000000) and DIV's inside Tables inside DIV's and when I set up and use a .14 (14px size and white color font syle class) my text stays black! The only thing that works is "inline styles". Not good for site wide-control. There is obviously a conflict here or something is superceding my classes. I prefer to use CSS for font control. I am using div's because of a "jquery slider" and tables because I usually design the look in photoshop and then use slices... not doing that on this site, but it's just what I'm used to. Thanks for any help. single page site is here "petermarsphotography dot com" 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 Hi all, I am attempting something new (to me at least). I have added two new images that will be backgrounds in my center content area. The first is this one . Everywhere that WAS white, I want to be this. Then, on TOP of that, and encapsulating the text itself, I want this one . Now, I thought I had this right, but it all isn't working. In FF, the first image isn't showing up at all. In IE, it shows up but is overlapping the tan area on the left by a pixel or two. In addition, all of this is way down south! I think the float: left is screwing things up, but I couldn't get anything right so I left it alone. Any help would, as always be greatly appreciated! Chris PS. URL is http://www.bartlett-family.net/BBCON/index3.html & CSS is at http://www.bartlett-family.net/BBCON/main3.css I have a td with a div inside it and I'm trying to vertically align the text in the div. The Div has a background image so the height of the div is important. For whatever reason vertical-align:middle just wont work. I've tried in both IE and FF and nothing I do seems to work. Here is my code Code: .globalNav, .globalNav td {
margin: 0px;
padding: 0px;
width: 100%;
height:28px;
border-bottom: 1px solid #94AEC1;
border-collapse: collapse;
}
.globalDiv{
color:#fff;
width:100%;
height:28px;
background:#94AEC1 url(../images/grad_bar.gif);
background-color:#94AEC1;
margin:0px;
padding: 0px 0px 0px 10px;
overflow:hidden;
}
.globalDiv a{
font-size:10pt;
color:#fff;
}
.globalDiv a:link,.globalDiv a:visited{
text-decoration:underline;
}
.globalDiv a:hover{
text-decoration:none;
}
Thanks I have a <ul> list in which I set the opacity for the <li> elements. Inside the <li> elements I have <a> elements. The issue is that the <a> element text is inheriting the opacity for the <li>??? Here is a link http://casadelmar.tmhdesign.com Thanks. I have a blog and I want to put my text inside a border/wrapper. So I've made the border and sliced it up into 3 parts: top middle and bottom. I want to place the text content within the middle of this graphic and so I figure I need to make the sliced images as a background using css and then type whatever I want over it. So I did this but dont know what Im doing wrong: Code:
<style type="text/css">
top {background: url('/images/t1.gif') ;}
middle {background: url('/images/t2.gif') ;}
bottom {background: url('/images/t3.gif') ;}
</style>
<div class="top" id="top"></div>
<div class="mid" id="mid">
<div class="content" id="content">Content Goes Here</div>
</div>
<div class="bottom" id="bottom"></div>
Any help is appreciated. JH Hi, I have centered a table horizontally and vertically. To do this I put a table inside a table. so i don't want to use absolute positioning, as the position would change if the window size changes... My problem, with relative positioning, is that I can't figure out how to put my "some text" over an image -which is inside the table cell- in the exact position i want, without "collateral damage"... The collateral damage is that if I put the <div> tag inside the table (see example 1), it will occupy the space and as result the image wll be moved down and layout won't be centered vertically anymore... If I put the <div> tag outside the table (see example 2), as result there will be more occupied space at the top, and the layout isn't centered anymore... Here you can see the code i used for both example 1 and example 2: example 1: <html> <head> <title>relative problem - example 1</title> </head> <body> <table width="100%" height=100% border="1"> <tr> <td width="100%" height="100%" align="center" valign="middle"> <table border=1> <tr> <td width="640" height="480"> <div id="Layer1" style="position:relative; left:50px; top:50px; width:50px; height:200px; text-align:left; overflow: auto; z-index:1;"> some text some text some text some text some text some text some text some text some text some text some text some text </div> <img src="http://www.pbworks.net/images/help.jpg" width="640" height="480"> </td> </tr> </table> </td> </tr> </table> </body> </html> example 2: <html> <head> <title>relative problem - example 2</title> </head> <body> <table width="100%" height=100% border="1"> <tr> <td width="100%" height="100%" align="center" valign="middle"> <div id="Layer1" style="position:relative; left:0px; top:200px; width:50px; height:200px; text-align:left; overflow: auto; z-index:1;"> some text some text some text some text some text some text some text some text some text some text some text some text </div> <table border=1> <tr> <td width="640" height="480"> <img src="http://www.pbworks.net/images/help.jpg" width="640" height="480"> </td> </tr> </table> </td> </tr> </table> </body> </html> thx for letting me know... hi folks, i am redesigning my homepage and i have one little problem in IE. The footer i have will not stay down at the bottom of the screen in IE. Firefox works just fine like usual. Here is the original site Here is the new design I changed the design, so that it is easier to read and scroll - some people reviewed my page and i think that makes sence. if someone could help me with that problem, that would be great .... i think IE puts the footer right underneath the navigationbox to the left, thats why it is up there .... i tried to set the position of the footer 'fixed', but it didn't look right in FF nor IE (when scrolling it somehw moved with the overall picture) the footer in the CSS is called #verify ..... Thank you Basically on this page here -> http://www.prxa.info/area51/profile.php?info=1 The copyright molds into the right column and i wish it to stay below both the left and right, how would i go about doing that? hi folks, i guess i have a fairly simple question for you guys & gals - but i am just not getting to the solution. i have this code: Code: <p><a class="text_menu_gray" href="products.html" onmouseover="this.className='text_menu_brown';return true;" onmouseout="this.className='text_menu_gray'">products </a></p> ... which makes the grey-colored word 'products' appear brown when the mouse is over it. thats all good - but how can i make it stay like that, when the word is clicked on? and will it change back to grey, when another word is clicked on? any advice would be greatly appreciated So I have 5 image rollovers onmouseover() all in a row with the following css and javascript. Currently, the left-most image rollsover just fine, but when I try to rollover the others, the image that comes to replace the rolledover one gets put in the left-most spot instead of right on top of the image that was rolledover. I can't use absolute positioning because the whole webpage is centered according to window size. Help is greatly appreciated. Here's the link: create.byu.edu/newsite CSS: Code: div.info
{ float:left;
display:inline;
margin-left:0px;
margin-top:35px;
}
div.team
{ float:left;
display:inline;
margin-left:0px;
margin-top:35px;
}
div.work
{ float:left;
display:inline;
margin-left:0px;
margin-top:35px;
}
div.sites
{ float:left;
display:inline;
margin-left:0px;
margin-top:35px;
}
div.news
{ float:left;
display:inline;
margin-left:0px;
margin-top:35px;
}
javascript: Code: var image1 = new Image();
image1.src = "images/info.jpg";
var image2 = new Image();
image2.src = "images/infoblue.jpg";
var image3 = new Image();
image3.src = "images/team.jpg";
var image4 = new Image();
image4.src = "images/teamblue.jpg";
var image5 = new Image();
image5.src = "images/work.jpg";
var image6 = new Image();
image6.src = "images/workblue.jpg";
var image7 = new Image();
image7.src = "images/sites.jpg";
var image8 = new Image();
image8.src = "images/sitesblue.jpg";
var image9 = new Image();
image9.src = "images/news.jpg";
var image0 = new Image();
image0.src = "images/newsblue.jpg";
function roll(img_name, img_src) {
document[img_name].src = img_src;
}
HTML: Code: <div class="info">
<a href="info.php" onmouseover="roll('info', 'images/infoblue.jpg')" onmouseout="roll('info', 'images/info.jpg')">
<img src="images/info.jpg" border="0" alt="infogray" name="info">
</a>
</div><!--info-->
<div class="team">
<a href="team.php" onmouseover="roll('info', 'images/teamblue.jpg')" onmouseout="roll('info', 'images/team.jpg')">
<img src="images/team.jpg" border="0" alt="teamgray" name="team">
</a>
</div><!--team-->
<div class="work">
<a href="work.php" onmouseover="roll('info', 'images/workblue.jpg')" onmouseout="roll('info', 'images/work.jpg')">
<img src="images/work.jpg" border="0" alt="workgray" name="work">
</a>
</div><!--work-->
<div class="sites">
<a href="sites.php" onmouseover="roll('info', 'images/sitesblue.jpg')" onmouseout="roll('info', 'images/sites.jpg')">
<img src="images/sites.jpg" border="0" alt="sitesgray" name="sites">
</a>
</div><!--sites-->
<div class="news">
<a href="news.php" onmouseover="roll('info', 'images/newsblue.jpg')" onmouseout="roll('info', 'images/news.jpg')">
<img src="images/news.jpg" border="0" alt="newsgray" name="news">
</a>
</div><!--news-->
Hi. I have two DIVs. One below another. When the top one expands, i want it to push down the bottom one. When the bottom one expands, i want it to be just below the top one (open or closed) and always expand to the bottom of the containing DIV. Problem is that when i expand the bottom one, it goes to the end of the body tag, not the bottom of the containing DIV. Help? Thanks. Code:
<div style="width: 14em; border: solid 1px green; height:515px;">
<div id="nav_round" style="width: inherit;">
<div id="nav_ctl" style="width: 13em; background-color: #C3D9FF; padding:5px;">
<span style="float: left;">
<img id="nav_arrows" src="http://www.trezoro.com/icons/btn_down.gif" onclick="expCollapse('nav_wrapper', 'nav_arrows');"
style="padding-left: 5px; cursor: pointer;" /></span><center>
<span><b>Quick Calendar</b></span></center>
</div>
<div id="nav_wrapper" style="width: 13em; background-color: #C3D9FF; padding:5px 5px 5px 11px;">
</div>
</div>
<div style="border: solid 1px red; width: auto;
margin-top: 10px; margin-right: 15px;" id="video_round">
<div id="video_ctl" style="width: inherit; background-color: #C3D9FF;">
<span style="float: left;">
<img id="video_arrows" src="http://www.trezoro.com/icons/btn_down.gif" onclick="expCollapse('video_wrapper', 'video_arrows');" style="padding-left: 5px; cursor: pointer;" />
</span>
<center>
<span><b>Videos</b></span></center>
</div>
<div id="video_wrapper" style="width: inherit; height:100%; padding: 0px 3px 3px 3px; background-color: #C3D9FF;">
<div style="background-color: White; width: 100%; overflow-y:scroll; overflow-x:hidden;">
<div style="width: 100%; padding: 5px;">
<div id="reel1">
<img src="../images/default.jpg" style="cursor: pointer; border: solid 1px brown;" /></div>
<div style="padding-left: 10px; vertical-align: top;">
<span style="float: left; width: 100%;">test</span> <span style="float: left; width: 100%;">
test</span> <span style="float: left; width: 100%;">test</span> <span style="float: left;
width: 100%;">test</span> <span style="float: left; width: 100%;">test</span>
<span style="float: left; width: 100%;">test</span>
</div>
<script type="text/javascript" language="javascript">
new Draggable('reel1',{clone:true, revert:true});
Droppables.add('day_grid', {
accept: 'products',
onDrop: function(element)
{ $('shopping_cart_text').innerHTML =
'Dropped the 'element.alt + ' on me.'; }});
</script>
</div>
<div id="hrule" style="margin-left: 10px; margin-right: 10px; border-bottom: solid 1px #eaeaea;">
</div>
<div style="width: 100%; padding: 5px;">
<span>
<img src="../images/default.jpg" style="border: solid 1px brown;" /></span><span
style="padding-left: 10px; vertical-align: top;">test</span>
</div>
<div id="Div1" style="margin-left: 10px; margin-right: 10px; border-bottom: solid 1px #eaeaea;">
</div>
<div style="width: 100%; padding: 5px;">
<span>
<img src="../images/default.jpg" style="border: solid 1px brown;" /></span><span
style="padding-left: 10px; vertical-align: top;">test</span>
</div>
<div id="Div2" style="margin-left: 10px; margin-right: 10px; border-bottom: solid 1px #eaeaea;">
</div>
<div style="width: 100%; padding: 5px;">
<span>
<img src="../images/default.jpg" style="border: solid 1px brown;" /></span><span
style="padding-left: 10px; vertical-align: top;">test</span>
</div>
<div id="Div3" style="margin-left: 10px; margin-right: 10px; border-bottom: solid 1px #eaeaea;">
</div>
<div style="width: 100%; padding: 5px;">
<span>
<img src="../images/default.jpg" style="border: solid 1px #eaeaea;" /></span><span style="padding-left: 10px;
vertical-align: top;">test</span>
</div>
<div id="Div4" style="margin-left: 10px; margin-right: 10px; border-bottom: solid 1px #eaeaea;">
</div>
<div style="width: 100%; padding: 5px;">
<span>
<img src="../images/default.jpg" style="border: solid 1px gray;" /></span><span style="padding-left: 10px;
vertical-align: top;">test</span>
</div>
<div id="Div5" style="margin-left: 10px; margin-right: 10px; border-bottom: solid 1px #eaeaea;">
</div>
<div style="width: 100%; padding: 5px;">
<span>
<img src="../images/default.jpg" style="border: solid 1px gray;" /></span><span style="padding-left: 10px;
vertical-align: top;">test</span>
</div>
<div id="Div6" style="margin-left: 10px; margin-right: 10px; border-bottom: solid 1px #eaeaea;">
</div>
<div style="width: 100%; padding: 5px;">
<span>
<img src="../images/default.jpg" style="border: solid 1px gray;" /></span><span style="padding-left: 10px;
vertical-align: top;">test</span>
</div>
<div id="Div7" style="margin-left: 10px; margin-right: 10px; border-bottom: solid 1px #eaeaea;">
</div>
<div style="width: 100%; padding: 5px;">
<span>
<img src="../images/default.jpg" style="border: solid 1px gray;" /></span><span style="padding-left: 10px;
vertical-align: top;">test</span>
</div>
<div id="Div8" style="margin-left: 10px; margin-right: 10px; border-bottom: solid 1px #eaeaea;">
</div>
<div style="width: 100%; padding: 5px;">
<span>
<img src="../images/default.jpg" style="border: solid 1px gray;" /></span><span style="padding-left: 10px;
vertical-align: top;">test</span>
</div>
<div style="width: 100%; padding: 5px;">
<span>
<img src="../images/default.jpg" style="border: solid 1px gray;" /></span><span style="padding-left: 10px;
vertical-align: top;">test</span>
</div>
<div id="Div9" style="margin-left: 10px; margin-right: 10px; border-bottom: solid 1px #eaeaea;">
</div>
</div>
</div>
</div>
</div>
I've been trying to implement a footer on the site I'm working on, and I want it to stay at the bottom of the page. If there's content that pushes down, I want the footer at the bottom of the content. I've been trying to implement the method described by these two sites: http://www.sitepoint.com/forums/showpost.php?p=1239966&postcount=3 http://www.themaninblue.com/writing/perspective/2005/08/29/ but I'm having a hard time with the longer content page. Here's two examples on the site I'm working on that I have up and nearly ready. Short page: http://windrivers-gsp.com/WRK/index.php Long page: http://windrivers-gsp.com/WRK/hclub.php or http://windrivers-gsp.com/WRK/dams.php As you can see, the footer won't go to the bottom of the longer content on the long page, and I can't figure out why. I believe I've cleared everything, even implementing the PIE/Aslett clearfix on the container div. I think I'm just to the point where I need some more experienced eyes to take a glance and point out where I must have missed something. Any help is greatly appreciated! Oh, BTW, here's the addy for my CSS: http://windrivers-gsp.com/WRK/wrkCSS.css And yes, I know there's a nasty hack in place currently for the navigation menu. I'm working on that after I get the footer problem fixed. Hi, I'm racking my brain here and I can't figure out what I'm doing wrong. First of all, I have a "sidebar" div that is being pushed outside of the page, even though there is plenty of room for it in the content. http://65.175.116.253/design/demo.html I have included the CSS below, followed by the HTML and you can get the rar file for the entire layout at the following link http://65.175.116.253/design/design.rar I've been racking my head! All I want is the side bar, the two boxes way off to the right, to be floated to the right hand side of the screen, contained within the page. I can't figure out what I'm doing wrong. Can somebody look at this and tell me what I am doing wrong? I will paypal $5 to who ever figures it out.. Code: /*--- Generic Styles ---*/
body
{
background: #e3edc2; color: #333;
font: .8em, Arial, verdana, sans-serif;
margin: 0;
padding:0px;
}
#main {width:840px; margin:18px auto 0 auto; _text-align:left;}
a
{
color: #686397;
}
a img
{
border: 0px none;
}
p
{
margin: 0 0 1em;
}
.smallboldtext
{
font-family: verdana, helvetica, sans-serif;
color: #686397;
font-size: .7em;
font-weight: bold;
}
.mediumtext
{
font-family: verdana, helvetica, sans-serif;
color: #686397;
font-size: .9em;
}
.mediumboldtext
{
font-family: verdana, helvetica, sans-serif;
color: #686397;
font-size: .9em;
font-weight: bold;
}
.largetext
{
font-family: verdana, helvetica, sans-serif;
color: #686397;
font-size: 1.5em;
}
/*--- Header Styles ---*/
#header
{
margin-bottom: 1.75em;
padding-top: 1px;
background: #abd240;
}
#navbar
{
margin: 0;
padding: 0.5em 3em;
background: #686397;
color: #fff;
}
#navbar li
{
display: inline;
margin-right: 0.5em; padding-right: 0.75em;
border-right: 1px solid #99c;
font-weight: bold;
}
#navbar li.last
{
border: 0px none;
}
#navbar a
{
color: #d4ec84;
text-decoration: none;
}
#today
{
text-align: right;
margin-top: -1.66em; padding: 0 2em 0 0;
color: #fff;
line-height: 1;
}
/*--- Content Styles ---*/
#content
{
float: left;
padding: 0 20em 4em 3em;
width: 100%;
}
#content h1
{
background: #fff; color: #686397;
font-size: 1.5em;
margin: 0 33% 1.25em -2em; padding: 0.4em 2em;
}
#content h1 b
{
color: #b0d742;
}
#content h2
{
margin: 0.5em 0; padding-bottom: 0.25em;
border-bottom: 1px solid #b0d742;
font-size: 1.5em;
}
/*--- Content Styles ---*/
table.basic
{
border: 0px;
width: 100%;
border-collapse: collapse;
}
table.basicborder
{
border: 2px solid #b0d742;
width: 505px;
border-collapse: collapse;
}
table.mainsearch
{
border: 2px solid #b0d742;
width: 415px;
border-collapse: collapse;
}
/*--- Sidebar Styles ---*/
#sidebar
{
float: left;
width: 17em;
margin: 0 0 4em -18em; /* this creates a mathematical layout width of -1 */
}
#sidebar div h3{
background: #9b96ca;
}
#sidebar form_div
{
margin: 0; padding: 0.8em;
}
#sidebar div{
background: #3a3c2d; color: #fff;
padding: 0 1em 1em;
margin-top: 0.75em;
}
#sidebar div h3{
font-size: 1.25em;
margin: 0 -0.8em; padding: 0.4em 0.8em;
text-transform: lowercase;
}
#whatiscompany h4{
margin: 0 0 0.5em; padding: 0.5em 0;
border-bottom: 1px solid #fff;
font-weight: normal;
}
#whatiscompany p:first-line{
font-style: italic;
}
/*--- Footer Styles ---*/
#footer
{
clear: both;
padding: 1.5em 3em;
background: #a0c63a;
height: 15px;
}
#footer p
{
margin: .1em;
}
#footer a
{
color: #333;
text-decoration: underline;
}
------------------------------------------------------- Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>www.company.com/</title>
<link href="css.css" type="text/css" rel="stylesheet" media="screen">
<!--[if IE]>
<style type="text/css">
#today{
text-align: right;
margin-top: 0;
margin-bottom: 0;
padding: 0 2em 0 0;
position: relative;
top: -1.66em;
color: #fff;
font-weight: bold;
line-height: 1;
}
</style>
<![endif]-->
</head>
<body>
<!-- mockup, adding borders | markup, using float for layout (or the appropriate section) -->
<div id="header">
<img src="logo.jpg" alt="a link to the home page" width="231" height="52">
<ul id="navbar">
<li class="first">
<a href="http://www.company.com">nav link</a></li>
<li><a href="http://www.company.com">nav link</a></li>
<li><a href="http://www.company.com">nav link</a></li>
<li><a href="http://www.company.com">nav link</a></li>
<li><a href="http://www.company.com">nav link</a></li>
<li><a href="http://www.company.com">nav link</a></li>
<li><a href="http://www.company.com">nav link</a></li>
<li class="last"><a href="http://www.company.com">nav link</a></li>
</ul>
<p id="today">date here</p>
</div> <!-- end div id header -->
<div id="content">
<h1><b>home:</b> search</h1>
<img src="flash.jpg"><br>
<h2>quick search</h2>
<table class="mainsearch">
<tr>
<td>
<FORM action="http://company.com/" method="post">
<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
</td>
<td width="285" valign="top">
<br>
<span class="smallboldtext">Keywords - </span><input type="Text" name="keywords" size="25">
<br>
<span class="smallboldtext">Within - </span><select name="distance">
<option value="50"
>
50
</option>
<option value="Any"
>
Any
</option>
<option value="1"
>
1
</option>
<option value="5"
>
5
</option>
</select>
<select name="distance_measure">
<option value="Miles"
>
Miles
</option>
<option value="kilometers"
>
Kilometers
</option>
</select> <span class="smallboldtext">of</span>
<br>
<span class="smallboldtext">City & State or Zip - </span> <input type="Text" name="zip" size="15">
<br>
<center>
<input type="submit" name="search" value="search">
</center>
</FORM>
</td>
</tr>
</table>
</div> <!-- end div id content -->
<div id="sidebar">
<div id="whatiscompany">
<h3>what is company.com?</h3>
<h4>www.company.com</h4>
<p> This is simply example text that goes here. Sample example text is in this place. You can read the sample text here it is.
<br>
</p>
</div> <!-- end div id whatistea -->
<div id="loginsidebar">
<h3>login</h3>
<br>
<form action="http://company.com" method="post" name="login">
<p>
Username - <INPUT type="Text" name="member_user_name" size="12">
<br>
Password - <INPUT type="password" name="member_password_a" size="12">
<INPUT type="submit" name="submit" value="login" >
</FORM>
<br>
<a href="http://company.com">Forget Your Password?</a>
<br>
<br>
</p>
</div> <!-- end div id loginsidebar -->
</div> <!-- end div id sidebar -->
<div id="footer">
<p>
- <a href="http://company.com">nav link</a>
- <a href="http://company.com">nav link</a>
- <a href="http://company.com">nav link</a>
- <a href="http://company.com">nav link</a>
- <a href="http://company.com">nav link</a>
- <a href="http://company.com">nav link</a>
- <a href="http://company.com">nav link</a>
- <a href="http://company.com">nav link</a>
- <a href="http://company.com">nav link</a>
- <a href="http://company.com">nav link</a>
- <a href="http://company.com">nav link</a>
-
</p>
</div> <!-- end div id footer -->
</body>
</html>
|
|||||||