|
CSS - Theoretical Question
Is it possible using only CSS (suppose your hosting doesn't allow using scripts at all - only plain xhtml & style sheets), to make the following:
When I click on a link on one place on the page, the contents of on of the <div>s are changed from for example showing a photo into showing a small vertical list of links? Similar TutorialsHey there! I have a question: is it possible to change the properties of OTHER elements, IDs, et cetera when hovering over something else? For example, let's say I have a fieldset, and inside are some fields, and a <legend>. Is it possible to make the legend change color when I move my mouse over the fieldset, and not the legend? This could make for some nice CSS effects. Thanks! Greetings 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? 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. 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 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- 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 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>
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 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 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. Is possible to write this in one line? : Code: font: 12px Verdana,Arial,Helvetica,sans-serif; line-height: 1.4; What I need to do to put line-height: 1.4; in font line ? Can either someone direct me to a webpage or help me out in figuring out what to do when one css style interferes with another? I have a couple different style sheets and when I load them together in one page one style is taking over another one. Thanks. 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; } 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. |
|||||||