|
CSS - Css/headrer Question/help
I am wanting to place an Empty Header with a background-color: #FFF; at the Top of my index.php.
Example : <!-- XHTML --> <div id=" header"></div> /* CSS Rules */ #header { background-color: #FFF; width: 800px; height: 150px; margin: 0 auto; <!-- Position to Top and Center --> padding: 0px; } I do not want it nested inside a <div id="wrapper"></div> . The <div id="nav"></div> will not be nested inside the header, it will be under it. And the Nav to will not be within a wrapper div. I guess what I am asking is, is my code right? And must I nest all my Mark Up within a Wrapper Div? Please forgive me for un proper HTML and CSS syntax. I am here to learn. Thank you Similar TutorialsGreetings all, Firstly, I am just now starting to use CSS instead of tabled layouts. I must say I am impressed by the power of CSS, but am still learning the ins-and-outs of it. I was wondering if there are any good references/books you'd suggest purchasing or looking at online? Now for my specific question. For my simple page project I am using to learn CSS, I have a <div> that denotes the header. This is supposed to simply have a small .jpg image on the left and some text on the right, like this: ___________________________ |[ i m a g e ]....................text | However, it comes out looking like this: ___________________________ |[ i m a g e ]..........................| |.....................................text| I suspect it is due to the align: right of the text, but am not sure how to correct it. Relevant snippets of code: testpage.html Code: ... <div class=header> <img src="image.jpg"><h1>TEXT</h1> </div> ... style.css Code:
...
#header{
background-color: #FFF;
border: 2px solid #666666;
width: 860px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
margin-bottom: 0;
}
#header h1{
text-align: right;
margin-right: 20px;
font-style: italic;
letter-spacing: 3px;
}
Thanks for any advice. Hi, I have three <div> Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<div id="container" style="width:500px;height:700px;background-color:green;">
<div id="one" style="float:left;width:100px;background-color:#ff9900; ">one<br>one<br>one<br>one<br>one<br>one<br>one<br></div>
<div id="three" style="float:right;width:100px;background-color:red;">three </div>
<div id="two" style="float:left;width:70%;background-color:#ff9988;">two jdfk hnldncf ddhf sd ohdnfc kbldhcv ohsvnskd hvjnsdhv hviopsdhv kbhopvd v onksdnv oln;sdmnv m;mv mnml;vm vm;klf kdfl'gl;v 'fg 'kdf'kvb'l ;'lfk</div>
</div>
</BODY>
</HTML>
I noticed when I increased the % width of my <div two> it goes below my <div three> I was under the impression it should just stay at the same level and text should wrap around my div three? But I guess that's not the case. Am I doing the something wrong or is this the expected behavior? how can i center a div in the center of a page, but within that div align every thing to the right. It seems simple but I can't get it to fly. i am having a small issue with font size in browsers. i am using smarty template engine to create websites, i have originally created the html pages using css after slicing in photoshop. the pages look similar with respect to font sizes in all browsers when i integrate this html page into smarty i am using a copy of a template in smarty to create a website, so this copy also has a css file, i have commented most of the code in this css file which is in the smarty folder and i have used my css code which i initially created. the problem i am facing is with firefox only and all other browsers work fine only in firefox the text for h1, h2, p, ul li, a... etc are all appearing 1px smaller in size when compared to all other browsers i have tried using !important and inline styles however only firefox is displaying the text in the entire page 1px smaller compared to all other browsers which is not consistant. i have the following in the css file * { margin: 0; padding: 0; border: 0; } body { background: #ffffff; font: normal 12px Arial, Helvetica, sans-serif; margin: 0; padding: 0; } please advice. any help will be greatly appreciated. thanks. If you would be so kind as to visit www.footbagfreaks.com, you will see a sample site using css. On the main navigation, I am curious about something. What establishes the height of each nav element? They are all uniform. What I would like to do is this, which I hope I can explain. I would like to have a set dimension for each nav element, lets us just say each to be 30px high, by 150px wide. I would like to specify the area, 30 x 150 have a rectangular trans. gif as its background and the initial color of the bg would be the same as the trans. gif. On a mouseover, the bg color would change, and thus would show the the new color through the portion of the trans gif which is transparent. Basically, the same effect as on the logo on the top left of the page. If someone can help me with this, I'd appreciate it so much. OK .. I have 5 layers surrounding each one of my menu links .. the layer over-laps another layer with the main content in. Now if you look here you will see what i mean .... http://www.geocities.com/jezman2002/index.html You can see four of the layers but the top one i need to be black AFTER it crosses the line !!!! Do u see what i mean I just wondered if there was any easy way to do this ??? -Thanks- I am currently working on a site: www.wirelessguy.net I am trying to get it so that when links are clicked, the pages load in the middle white section. I don't have the links made yet, but I've been messing with it with text only. I made the site template in a php file, then I include that file on all my pages that I create. How can I get pages to load in the middle section of the site? If I have a link that I want to display in the center of a module that no matter what size a user chooses it stays centered..IE. via user config a user can make it 100px or 400px.. [module width] The question is how can I center a link and no matter what the user picks for a width as stated above the link stays centered? Hi everyone. I was wondering if it was possible to create a link from already existing text on a page by reworking the styles in the cssstylesheet file? I'm currently editing around a shopping cart for a client but i was wondering if I could take a bit of a shortcut using css instead. Thanks for your time. Pablo Anyone know why the <div>'s aren't displaying correctly in FF? View with IE if you want to see how it should look. http://www.cooperworkskilns.com CSS: http://www.cooperworkskilns.com/styles/layout.css I'm not sure is this question relating to css or javascript. Pls help. thanks alot Q1: What are the ways you can deal with x-browser issues? What are the pros and cons of each? Thanks, Gary Hi, I have the below css style that I am mostly using my pages, I have a standart anchor style. Anyway I want to attach "the other one" link with another style without touching the current style. How can I do this? Does CSS has a nested thing like c++? Thank you, Cem Code:
<html>
<head>
<style type="text/css">
<!--
a:link {font-family:verdana,helvetica; font-weight: bold; font-size:11px; color: #0069b7; text-decoration: none;}
a:active {font-family:verdana,helvetica; font-weight: bold; font-size:11px; color: #0069b7; text-decoration: none;}
a:visited {font-family:verdana,helvetica; font-weight: bold; font-size:11px; color: #0069b7; text-decoration: none;}
a:hover {font-family:verdana,helvetica; font-weight: bold; font-size:11px; color: #000000; text-decoration: none;}
-->
</style>
</head>
<body>
<a href="http://url">First one</a><br>
<a href="http://url2">The other one</a><br>
</body>
</html>
Hi im a relative newbie and am having a really annoying and stupid problem. I have a 3 column layout but the 3rd column "rightcolumn" for some reason is in the 2nd column "middlecolumn". It would seem like there's a missing </div> but i can't figure it out. any help would be awesome source: kdpatton.com/test.htm I'm having a difficult time trying to set up a certain layout using css & div tags. I am not capable yet to create post containing a url. However, I've created in my linked css sheet, #header, #sideinfo, #maincontent, & #footer. I attempted using the position:absolute; and figure out in %'s how to lay each div out (max %=100) some elements work fine, while others do not work. This is probably a severe noob question, but I appreciate any help on this as it will be used as building blocks for the next steps to come. Thank You again. I've never used one line of CSS every before tonight. I'm learning how to use HTML and CSS Properly and the CSS thing is completly new to me. The book gives an example: Code: <HTML>
<HEAD>
<TITLE>StarBuxx Coffee</TITLE>
<style type="text/css">
body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 1px dotted gray;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
</STYLE>
</HEAD>
<BODY>
<H1>StarBuxx Coffee Beverages</H1>
<H2>House Blend, $1.49</H2>
<P>A smooth, mild blend of coffees from Mexico, Bolivia, and Guatemala.</P>
<H2>Mocha Cafe Latte, $2.35</H2>
<P>Expresso, steamed milk and chocolate syrup.</P>
<H2>Cappuccino, $1.89</H2>
<P>A mixture of espresso, steamed milk and foam</P>
<H2>Chai Tea, $1.85</H2>
<P>A spicy drink made with black tea, spices, milk and HHUUHHHHNAY!</P>
</BODY>
</HTML>
In The picture in the book, it shows a 1px border around the entire Content, but when I open it up in IE I don't see the border around the content. Why is this? Is the book out-dated? Also, Did anybody know Gray and Grey are both the same thing? g-r-a-y is simply an American derivation of the original spelling g-r-e-y. Gray is a color. Grey is a *colour* This should be easy for you guys. I got a bordered flash object inside of another bordered text area div. Markup as follows: Code:
#flashpictures{
width:auto;
margin:0 5px 0px 15px;
border: 1px solid black;
float: right;
}
.textborder{
clear:none;
position:relative;
border: 1px dotted #244109;
margin:0px 0px 15px 0px; padding:5px;
width:750px;
background-color: #b4b4b3
}
<div class="textborder">
<div id="flashpictures">
*flash object code*
</div>
*text*
</div>
What's happening, strangely enough, is that it's not rendering properly in FF or Chrome (but is in IE). The bottom margin of the text area is collapsing, but in IE it displays correctly (the flash object is completely inside). Can anyone help? Thanks. Hi all I'm learning how to do things in DIVs rather than tables. One thing I'm slowly realising is that DIVs don't naturally nest like tables do. Please see he http://www.mitya.co.uk/csstest As you can see the master DIV (grey border) doesn't surround the inner DIVs naturally as a table would. Presumably this isn't the nature of DIVs and I just have to set heights instead? Thanks in advance I'm aware of what z-index does and that it can only work on positioned elements. My question is this: for z-index to work properly does a position also need to be set for the element that will be below the element with a higher z-index? hi all ! Im getting image not found errors and I need some help. Im using this format to load the images for my template Code: background:url(../images/date_bg.gif) The url for my image should be: http://joomla.mydomain.com/template/mytemplate/images/logo.jpg but instead Im getting: http://joomla.mydomain.com/images/logo.jpg Wich is the correct way to do it? I know the easy way is to just copy the path at the CSS, but if I change the domain or any other setting then it become useless unless I edit it again. I will preface this with the fact I am a newbie with CSS. Site location - I would tell you where site was but against rules! Question - site looks OK on everything except IE6 and lower. The body should be centered under the header image however it is pushed/alligned left. The CSS is below. Can anyone see why this is happening and what a good fix would be? Thanks /* CSS Document */ body{ padding:0; margin:0;} form, div, p , ul, span, h2, h3, h4, h1,input, img{ padding:0; margin:0;} p{ color:#3D3B45; font: 12px/normal Verdana, Arial, Helvetica, sans-serif} ul{ list-style-type:none } img { border:none; } .spacer{ font-size:0; line-height:0; clear:both; } /*---------------header-------------------------------*/ #main{ width:780px; margin:0 auto 0 auto; background:#FFFCEC; } #main #header{ width:780px; height:175px; background:#FFFCEC url(images/header.jpg) no-repeat 0 5px; position:relative; } #header a.title{ position:absolute; left:23px; top:37px; width:228px; height:25px; display:block; } #header h1.title a{ display:block; text-decoration:none; } #header ul.nav{ position:absolute; left:566px; top:5px; background:url(images/nav.gif repeat-x 0 0 #FFFEE4; width:213px; padding:0px 0 18px 0; margin:0; } #header ul.nav li{ background:url(images/h_line.gif) repeat-x left bottom; font:bold 11px/normal Arial, Helvetica, sans-serif, Tahoma; color:#484848; width:197px; padding:5px 0 5px 0; } #header ul.nav li a{ background:url(images/arrow.gif) no-repeat 0 5px; margin:0 0 0 15px; font:bold 11px/normal Arial, Helvetica, sans-serif, Tahoma; color:#484848; text-decoration:none; padding:0 0 0 15px; } #header ul.nav li a:hover{ color:#000000; } /*------body-------*/ #main #left{ background:url(images/v_line.gif) repeat-y right top; width:543px; margin:0 0 0 0; padding:15px 0px 0px 23px; float:left; } #left h2.contact{ background:url(images/contact_wp.gif) no-repeat 0 0; width:518px; height:16px; text-indent:-200000px; } #left h2.survty{ background:url(images/survty.gif) no-repeat 0 0; width:518px; height:32px; text-indent:-200000px; } #left h2.welcome{ background:url(images/welcome_to_wp.gif) no-repeat 0 0; width:518px; height:35px; text-indent:-200000px; } #left p.weltxt{ font: 12px/normal Verdana, Arial, Helvetica, sans-serif; color:#3D3B45; text-align:justify; width:518px; margin:0px 0 0 0; } #left p.weltxtsp{ font: 12px/normal Verdana, Arial, Helvetica, sans-serif; color:#3D3B45; text-align:justify; width:518px; margin:16px 10px 10px 0; } #left p.headingtext{ font: 12px/normal Verdana, Arial, Helvetica, sans-serif; color:#3D3B45; text-align:justify; width:518px; margin:10px 0px 10px 0; } #left p.weltxt a.more{ float:right; padding:25px 0 21px 0; color:#3D3B45; text-decoration:none; font-weight:bold; } #left p.weltxt a:hover{ color:#990000; text-decoration:underline; } #left h2.rest{ background: url(images/catering.gif) no-repeat 0 0; width:516px; height:29px; line-height:0; font-size:0; margin:20px 0 0 0; text-indent:-200000px; clear:both; } #left div.menu{ background:url(images/menu_bg.gif) repeat-x 0 0; width:516px; height:123px; padding:11px 0 0 7px; } #left div.menu ul.brown{ float:left; width:94px; margin:0 8px 30px 0; display:block; } ul.brown li{ background:url(images/brown.gif) no-repeat 0 8px; padding:0 0 13px 10px; color:#3D3B45; } ul.brown li a{ text-decoration:none; color:#3D3B45; font:bold 11px/normal Arial, Helvetica, sans-serif, Tahoma; } ul.brown li a:hover{ color:#990000; text-decoration:underline; } #left h2.order{ background:url(images/directions2.gif) no-repeat 0 0; width:513px; height:26px; text-indent:-200000px; clear:both; } #left ul.image{ margin:15px 0 0 0; width:520px; } #left ul.image li{ height:153px; width:95px; text-align:center; margin:0 6px 0 0 ; background:url(images/order_now.gif) no-repeat 14px 134px; float:left; font:bold 11px/normal Arial, Helvetica, sans-serif, Tahoma; color:#3D3B45; } #left ul.image li span{ color:#B57D0A; } #left ul.image li a{ margin:0 0 0 0; text-decoration:none; color:#990000; } #left ul.image li a:hover{ color:#000000; text-decoration:underline;} /*------right----*/ #main #right{ width:200px; background:url(images/right_bg.gif) repeat-x left bottom #FFFEE4; float:left; padding:25px 0 97px 13px; } #right h2.our{ background: url(images/location.gif) no-repeat 0 0; width:145px; height:15px; text-indent:-200000px; } #right p.ourtxt{ font: 12px/normal Verdana, Arial, Helvetica, sans-serif; color:#3D3B45; text-align:justify; width:168px; margin:18px 0 0 0; } #right img{ margin:13px 0 0 0; } #right p.border{ width:178px; height:5px; margin:23px 0 0 0; font-size:0; line-height:0; background:#FCF2B8; } #right p.ourtxt span{ color:#8F1401; font:bold 12px/normal "Trebuchet MS",Helvetica, sans-serif, Tahoma; } #right p.ourtxt a{ color:#B57D0A; font:bold 12px/normal "Trebuchet MS",Helvetica, sans-serif, Tahoma; text-decoration:underline; } #right p.ourtxt a:hover{ color:#000000; } /*----footer-----*/ #footer{ width:780px; position:relative; background:url(images/footer_bg.gif) repeat-x 0 0 #FDF6D2 ; clear:both; height:168px; } #footer ul.foot{ position:absolute; top:21px; left:140px; width:522px; } #footer ul.foot li{ float:left; margin:0 14px 0 0; color:#232323; font:bold 11px/normal Arial, Helvetica, sans-serif, Tahoma; } #footer ul.foot li a{ text-decoration:none; text-transform:uppercase; color:#232323; } #footer ul.foot li a:hover{ color:#990000; } #footer p{ position:absolute; top:43px; left:324px; text-align:center; color:#232323; font:normal 11px/20px Arial, Helvetica, sans-serif, Tahoma; } #footer p a{ color:#232323; font:normal 11px/20px Arial, Helvetica, sans-serif, Tahoma; text-decoration:underline; } #footer p a:hover{ text-decoration:none; } |
|||||||