|
CSS - New Member Has A Question
Hello:
I am a new member to this forum. I am also new to HTML and CSS. I am working through a book and doing the site along with them. I ran in to a problem that I just can not figure out, I wondering can I include my css style sheet here with a message for anyone to see. I don't know if that is allowed or not. There is just so much to learn and so many questions. I would appreciate any help. Carlynn Similar TutorialsHello everybody, I really need help on a CSS matter; Let me explain. My webpage is in PHP. I have a member page called member.php I am selecting the state,city and street datas from database and adding a fake url to the end of member.php. i.e: member.php/MA/Boston/Mass_Ave I am building my CSS on the main page. Member.php When I open member.php directly, CSS works perfectly. But when I want to click on a member page from the main page (here the link is given as <a href='member.pgp/$url'>David's Profile</a>) the page opens of course but CSS does not work. When the link is given as <a href='member.pgp?$url'>David's Profile</a>, it works. But I should use "/" instead of "?". I tried 3 ways to implement CSS. 1-<link ...... href='style.css'> 2- Internal <style> tags on head part 3-@import style.css None of these worked. My project stopped on this step. Thanks for your comments. Best Regards, [/FONT] 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 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? 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 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 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, 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>
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- Hello Guys, I have the following problem with my .css: #pagerank { margin: 20px 0 20px 0; padding: 8px; width: 225px; float: left; background-color: #F6F8F9; border: solid #eee 0px; background-repeat:no-repeat; background-image:url(top3.jpg); I need this background-repeat:no-repeat; to be in the same line as this: background-image:url(top3.jpg); kind of like this: background-image:url(top3.jpg) no-repeat; but I dont know how to format it correctly how do you do it? Best Reagrds, Brill 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'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. hi there i am quite new to css and i would appreciate your help. i would like to make the following thing : my gallery contains 10 images (600/400 pixel) i would like to make one single page that shows only one photo at a time and has (text or icon) links to the other 9 images ... of course it would be nice to have some minimalistic transition effect between the images too but if its too much for you i am mainly interested in the functionality part if this (as so many things) has been made as a tutorial i will be glad to get a link too thanks zs hi at my workplace they have asked me to create a simple html page which will be used as a small widget in a website. as per the requirement in the html file. i should not use an external stylesheet and also no embedded style however i should write the page completely using inline css. all this is fine. however my question and issue i am facing is with adjusting height as the content increasing when i give for example margin or padding. please check out this link where i have created an image of what i am creating as html page using inline css. http://www.sudhakargolakaram.co.in/form.html as per the image there is an outer div which has the light blue background color which i have created like a container div with the background color the dark blue rectangles are 3 images and the white color on the right with the rounded rectangle at the top and bottom is where content like header tag, img tag, forms etc will be used. lets say for example i divide the images and content as 2 divs floating left with images div as 100px and content on the right as 300px width so a total of 400px and a total height of 300px based on the design that i have the total width is 400px (left div with images=100px and right div with content=400px) and total height is 300px for example. i am ok with the left div as the images have a fixed width and height, the problem i am facing with is the content div. as the content div contains header tags, a small paragraph information within p tag, a small form with about 2 to 3 form fields, in order to add all these elements as per the design i am using padding top, padding bottom and if needed margin top and margin bottom. so due to this the content may go beyond the bottom div which has the rounded rectangle at the bottom, and this is not how it should appear the entire content should sit inside the 300px height in the right div so do i have to keep subtracting the amount of padding and margin i am using from the height value of the right div so that the content sits inside within the total 300px height. how do i go about this height aspect which i am having issue with and also is there something specific that i have to keep in mind for ie6 browser. for the left and right div do i have to use #left{ float: left; width: 100px; height: auto; } #right{ float: left; width: 300px; height: auto; } or do i have to specify the fixed height which is 300px for #left and #right divs also in the #right div i am using 3 inner divs 1 for top rounded rectangle background = { background: url(topbg.jpg no-repeat; width:300px; height: 10px; } 2nd div with white background color no background image= do i have to specify a fixed height for this 2nd div = { width:300px; height: ; } 3rd for bottom rounded rectangle background image = { background: url(bottombg.jpg no-repeat; width:300px; height: 10px; } any help will be greatly appreciated. thanks. edited I had the wrong code I have the following html/css code. I was wondering if this is the only way to do a multi column layout where all the columns fit to the size of the largest one?? I am newer to css to be warned. Is there any other way besides layering to have perfectly even columns? 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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="" />
<title>Untitled 8</title>
<style type="text/css">
.clear {
line-height:0;
font-size:0;
clear:both;
}
#container {
background-color: white;
border: black solid;
}
#container3 {
float: left;
width: 100%;
background: green;
overflow: hidden;
position: relative;
}
#container3 #header {
width: 100%;
height: 50px;
margin: 5px;
padding-left: 5px;
padding-bottom:10px;
background-color: blue;
color: white;
font-size: 25px;
}
#container2 {
float: left;
width: 100%;
background:yellow;
position:relative;
right:30%;
}
#container1 {
float:left;
width:100%;
background:red;
position:relative;
right:40%;
}
#column1 {
float: left;
width:26%;
position: relative;
left:72%;
overflow:hidden;
}
#column2 {
float:left;
width:36%;
position:relative;
left: 76%;
overflow:hidden;
}
#column3 {
float:left;
width:26%;
position:relative;
left:80%;
overflow:hidden;
}
</style>
</head>
<body>
<div id="container3">
<div id="header">
Test Header
</div>
<div id="container2">
<div id="container1">
<div id="column1">
Test Column1
<br />
Test Column1
<br />
Test Column1
<br />
Test Column1
<br />
Test Column1
</div>
<div id="column2">
Test Column2
</div>
<div id="column3">
Test Column3
</div>
</div>
</div>
</div>
</body>
</html>
|
|||||||