|
CSS - Css Problem Embedding A Blog Style
I'm relatively ignorant about css and html, but I've faked my way along so far. But I've encountered a problem. I designed a style for a blog on LiveJournal, and it looks OK there. (http://www.livejournal.com/users/javajed/). I've also put a small bit of JavaScript in my website to embed my blog there. (http://www.jaredvoss.com/). On my website, the embedded blog is all screwy. All three DIVs should be contained within the scrolling layer, but only two of them are. Originally the sidebar DIV was even hidden behind the layer it's embedded in (I brought it forward using a z-index code). It seems like the sidebar DIV is taking it's position cues from the main body of my site, while the other DIVs are taking their position cues from the layer they're embedded in. I want all three DIVs to be aligned as they are on LiveJournal, and contained within the scrolling layer on my website. Any ideas? I've tried using wrapper divs and container divs (maybe not correctly) without success. Thanks for any help!
Similar TutorialsHi, I have modified a form for a web blog for a friend, and got extra fields included for them. But we have an issue on the pc with internet explorer and the position of the elements in css. On safari and opera and firefox, all the labels for the form tags line up correctly, but on internet explorer they do not, the message label is lined up with the address, how can we fix this. If you look at this page: http://website-traffic.inpress.co.uk/contact-us/ You can see what we mean with the form. How can I fix this problem with the css to get them all correctly lined up. Many thanks Barry First I am a copy/paste kinda chick w/ not a lot of experience but I do know enough to know that if you want something to look a certain way or act a certain way, there is someone out there saavy enough to get it right :-) On my LiveJournal blog, my style that I am using has the individual userpics/icons by default aligned to the left w/ text right up next to it and wrapping around it. I would like it to by default w/ hopefully some css code, to automatically be beneath the icons. Currently I'm simply inserting br tags (hitting the enter key) when I post a new entry to force my text beneath the icon but I know there must be a way to force it to do what I want it to. The folks at LJ are NOT very helpful and they have this funky layers thing going on as opposed to simply wysiwyg or blank html/css coding pages. You have to learn their system before you do any altering but they do have a place for just adding simple css code changes. First, is this possible and second can someone pleaasseee help? Thanks so much in advance!!! Oh the url is: http://nitamcgrew.livejournal.com/ Hi, Can't see what is wrong with this line.. maybe i'm being blind? <option style="font-family: verdana; font-size: 10px;" value="http://www.link here.com">LINK HERE</option> Any ideas? I am trying to use ul list to organize my images. Here is how it should look like. IMAGE IMAGE IMAGE text text text But instead, I get IMAGEtext IMAGEtext IMAGEtext Code:
<style>
/**************************************************************
Thumbnail Lists
**************************************************************/
ul.thumbs,
ul.thumbs li {
margin: 0;
padding: 0;
}
ul.thumbs li {
margin: 0 0 15px 0 !important;
margin: 0;
padding: 0px;
list-style: none;
}
ul.thumbs li.pagination {
margin: 10px;
padding: 0px;
list-style: none;
display:block;
}
a.thumb img {
border: 5px solid #ccc;
}
a:hover.thumb img {
background: #8EB4C6;
border: 5px solid #000;
}
a:hover.thumb {
background: none;
}
a.thumb span {
width: 100%;
display: block;
margin-top: -5px !important;
margin-top: -2px;
}
</style>
<ul class="thumbs">
<li>
<a href="#" class="thumb"><img src="/FLPM/media/news/images/8P5B7K8M_sm.jpg" alt="" class="floatLeft" /></a>
<a href="?Process=DeleteImage&IMAGEID=13" class="thumb"><span class="floatLeft">DELETE</span></a>
</li>
<li>
<a href="#" class="thumb"><img src="/FLPM/media/news/images/7K4V6F7H_sm.jpg" alt="" class="floatLeft" /></a>
<a href="?Process=DeleteImage&IMAGEID=12" class="thumb"><span class="floatLeft">DELETE</span></a>
</li>
<li>
<a href="#" class="thumb"><img src="/FLPM/media/news/images/0C7O9X0A_sm.jpg" alt="" class="floatLeft" /></a>
<a href="?Process=DeleteImage&IMAGEID=11" class="thumb"><span class="floatLeft">DELETE</span></a>
</li>
<li>
<a href="#" class="thumb"><img src="/FLPM/media/news/images/1Q8B0L1N_sm.jpg" alt="" class="floatLeft" /></a>
<a href="?Process=DeleteImage&IMAGEID=10" class="thumb"><span class="floatLeft">DELETE</span></a>
</li>
<li class="pagination">1. </li>
</ul>
I dont get what is my list styles for the footer content section. listed items dont appear listed and I could not vertically center the div. Footer content section is right above the copyright notice. http://www.aslanyurek.com/rtt/ Code:
/* content footer.css */
#fcontent{
height:80px;
width:790px;
background-color:#999999;
}
#fcontent .help{
float: left;
height: 60px;
width: 300px;
vertical-align:middle;
background-color:#FFFFCC;
}
#fcontent .catalog{
float: left;
height: 60px;
width: 300px;
vertical-align:middle;
margin-left:10px;
background-color:#F0FFCC;
}
#fcontent li {
float:left;
list-style-type:square inside;
margin-left:25px;
}
#fcontent li a {
display:block;
}
Here is some code below. How do I write it, that only the title is bold and not the description? Code: <html>
<head>
<style type="text/css">
.selected {font-weight: bold; }
</style>
</head>
<body>
<ul>
<li class="selected">Title</li>
<ul>
<li>description 1</li>
<li>description 2</li>
<li>description 3</li>
</ul>
</ul>
</body>
</html>
I'm trying to set a link style for thumbnail images I have on my site but am having difficulty getting the style to take over the a { } and a:hover { } styles. Here is an example of the styles I have set; Code:
a {
color: #005D93;
text-decoration: none;
}
a:hover {
color: #990000;
text-decoration: underline;
}
#thumb {
position: relative;
float: left;
padding-left: 21px;
padding-bottom: 10px;
}
#thumb img {
width: 96px;
height: 145px;
}
#thumb img a {
text-decoration: none;
border: 2px;
border-color: #F5F6F7;
border-style: solid;
}
#thumb img a:hover {
border-color: #990000;
}
An example image tag is as follow; Code: <div id="thumb"><a href="details/page2.html" onclick="NewWindow(this.href,'name','640','460','yes');return false;"><img src="Images/2714.jpg"></a></div> With the above mentioned, the thumbnail is surround by the a color of #005D93 and not the border color I expected. An example can be seen here - Example. I know it must be something fairly obvious I'm missing. Any help would be greatly appreciated. Regards, JT Im just playing around with CSS and Photoshop and made this so far:- http://www.o0matte0o.myby.co.uk/windows-vista/ Lazy Link It look as its ment to in IE7, Vista IE and IE6 (apart from the PNG Transparancy in IE6) but when I view the site in Firefox there are spaces between each of the sub titles and the Title on the Transparent part is not in the correct place can any one help to see where Im going wrong please? I have tested the CSS and XHTML and bouth complie to the standard so I cant see what Im doing wrong :S Code:
body { color:#565656; font-family: "Segoe UI", "Trebuchet MS", sans-serif; font-size: 80%; }
hr { display:none; }
img { border:none; }
body { padding:12px 0 25px; background-image:url(../images/background.png); }
h1 { padding:3px; font-size: 165%; padding-left:40px; }
h2 { font-size: 100%; padding-left:110px; line-height:8px; }
h3 { padding-left:225px; }
.p1, .p2, .p3, .p4, .p5 { padding-left: 230px; padding-right:15px;}
a { color:#6666FF; }
a:hover,a:active { background-color:#9999FF; color: #565656; }
#container { margin-left:10%; }
#pageHeader { width:822px; height:80px; overflow:hidden; background-image:url(../images/header-test.png); text-shadow:#333333;}
#quickSummary { width:822px; background-image:url(../images/content.png);}
#preamble { width:822px; background-image:url(../images/content.png); }
#explanation { width:822px; background-image:url(../images/content.png); }
#participation { width:822px; background-image:url(../images/content.png); }
#benefits { width:822px; background-image:url(../images/content.png); }
#requirements { width:822px; background-image:url(../images/content.png); }
#footer { width:822px; height:27px; text-align:center; background-image:url(../images/footer-test.png); }
#linkList { position:absolute; float:left; top:100px; }
#linkList h3 { padding-left:30px; padding-top:1px }
#linkList h3, li, ul { list-style:none; display:list-item; }
Any other idears people comment (noting that the XHTML file should not be changed as Im trying to only do every thing with CSS like the name of the site HTML page is from.) this is what i got: a menuBox Code:
<tr align="center" valign="top" height="120">
<td height="120">
<div class="menuBox">
<div class="menuBoxHeader">Menu</div>
<p><a href="blah-blah4">4.</a></p>
<p><a href="blah-blah5">5.</a></p>
<br>
<p>some text>
</div>
</td>
</tr>
I use for the links Code: a:link, a:visited, a:active { color: #336699; text-decoration: none;
font: bold 11px/1px Verdana, Arial, Helvetica;
}
for the menuBox Code:
.menuBox { color: #c36;
font-style: normal;
font-weight: bold;
font-size: 9px;
line-height: 2px; font-family: Verdana;
background-color: #fef;
border: solid 1px #c36 }
and for the menuBoxHeader Code: .menuBoxHeader {
color: #efe;
font-style: normal;
font-weight: bold;
font-size: 9px;
line-height: 13px;
font-family: Verdana, Arial, Helvetica;
background: #c36 0px 0px;
margin: 1px 0px 0px;
position: relative;
top: 0px;
left: 0px;
width: 130px;
height: 16px }
So now my two questions. 1. What do I have to do to let it look in all the browsers the same? In Netscape 7.2 the links are to close to each other. In IE6 to width ( vertical ). 2. The menuHeader is on the most browsers correct ( mac and Win ) except MS. There is no 1px between the border and the red area. Or... are the others wrong and MS right? I hope that someone can help me? I have a rule called #MainContent. Now I want to change this rule for just one page so I duplicate it but don't add it to the global style sheet but declare the rule for this page only. However this doesnt work the div still changes based on the #MainContent rule in the global css file This is sort of an addendum to my earlier post on CSS, but with a new problem, now the problem is with IE. I am trying to get the SuckerFish drop downs to work and have been successful in Firefox, but IE is giving me problems. The best thing to do is look at it in action: http://www.forma3.com/stuff/css/index-v1.2.html http://www.forma3.com/stuff/css/css/index-v1.2.css I am guessing it is related to the parent child relationship in IE, namely the drop down is adopting the style (float: left) that is set for the horizontal menu. I had to put in an underscore for the "#nav li" since it was causing problems in Mozilla. Unfortunately, this causes a validation error. I am just wondering if there is a way to simply extend a style rule from one previously defined. For instance, if I have this rule: Code:
.textarea-box {
color: #990000;
background-color: #fff;
width: 375px;
height: 200px;
border: #000 solid 1px;
}
...if I want another text area rule to be the same except for one difference, the height should be 80px, do I have to write the rule out again with a new name, incorporating the new height, or is there some nifty way to just change the height in the new rule? Thanks for help with this. j9 I have a menu bar made up of <a href> elements that have a hover style of:
PHP Code: #mainMenu a:hover { color:#000000; background-color: #66c74c; padding: 1px 4px 1px 4px; margin: 1px 1px 1px 1px; } This will provide a green colored rollover visual as the user moves their mouse over the menu bar. I just added some JS today that will highlight the clicked (selected) menu so there is visual feedback of the section the user is in. For some reason, after setting the background color of the <a href> and color attributes, the HOVER: no longer functions. Here is the code to do the hilite where I pass the ID of the <a href> menu selection in the variable "menu": PHP Code: //--- Simplify setup by creating an array of the menus and hilight ID's --- var menus = ["menu1","menu2","menu3","menu4","menu5", "menu6","menu7","menu8","menu9","menu10"]; function J_hiliteMenu(menu) { //--- first make sure all the menu are hidden and unhilited --- for(i=0; i < menus.length; i++) { if (menus[i] == menu) theIndex = i; // Hold on to the chosen index position var obj = document.getElementById(menus[i]); if (obj == null) continue; // if menu is not available skip it obj.style.color = "#ffffff"; obj.style.backgroundColor = "#234fd7"; } //--- hilite the menu we're interested in --- var obj = document.getElementById(menu); obj.style.color = "#000000"; obj.style.backgroundColor = "#f8f400"; } Prior to hiliting the menu I un-hilite all the menus (since we may be switching from another). I think this is where the problem is. Maybe I need to redefine the rollover "hover" attribute for all elements during the un-hilite loop? Does anyone know how to set a HOVER: attribute using JavaScript? Thanks! Hi, I have a new template, and a new separate menu; the code has been validated on both. I'm having trouble adding the new menu to the new template, replacing the menu that came with the template. What I would like to do is embed it if possible so when I add content I won't have to change the menu on 400 different pages; also this is a nice menu with lots of code in the html. Is it possible to embed a menu from a root file with a small code? If not how do I add the huge code to my template? I have tried putting it on the top but the drop down doesn't work and parts of it are obscured by the content on my page. If I put the menu about half way down my page it works alright, but I need it on the top. (I tried to post the urls below but the forum rules prevent new members from doing so.) I know this is a lot of info, but I hope you can help me, if so I really appreciate it. Thanks, Dave Hi, I wrote a code that would import some mysql data into my website. Now I want to format that data into a nice table. Table is probably the wrong term since I am trying to avoid HTML. Anyway I was wondering how you can embed CSS into a PHP script. here is my website: dicebaseball dot org The 4/27Bruins0Dragons0 is the data I am trying to make tabular Here is the code that I am trying to embed CSS into: Code:
<?php
mysql_connect("localhost", "....", "....") or
die("Could not connect: " . mysql_error());
mysql_select_db("...");
$result = mysql_query("SELECT * FROM scores")
or die(mysql_error());
$row = mysql_fetch_array( $result );
echo $row['game_date'];
echo $row['away_team'];
echo $row['away_score'];
echo $row['home_team'];
echo $row['home_score'];
?>
I have a site that is designed to include a specific heading and footing on every page so that I can change my header and footer very easily. Problem is, my heading includes the entire <head> portion of the webpage, and doesn't end until it has already started the body. I am a bit old school and have my pages laid out as a table, which starts with my included header and ends with my included footer (the content goes into the "main" table cell opened by the header and closed by the footer). So, I guess I have a couple questions: - Is there any good way to embed page-specific style sheets given these constraints? - Do you think it is worth dividing up my header into two separate includes (e.g. 'header1.php and 'header2.php') so that I can customize the <head> section for each page? Hello, I'm brand new to this CSS business, so please be gentle! I'm trying to place my AP Div objects inside a table so that their positions are relative to the edges of the table, rather than relative to the edges of the browser window. I'm guessing I need to somehow put the code for the table around the code for the AP Div objects, but I can't work out how it's supposed to look. Any guidance would be much appreciated. Thanks! I used this method because it seems like the most accessible and search-engine friendly. I run into a problem in IE6 and IE7 where the cursor does not turn into a pointer when the mouse is hovered over the image. HTML: Code: <h1 class="header">
<a href="#"><span></span>Header Text</a>
</h1>
CSS: Code: #header h1.header{
width:163px;
height:37px;
float:left;
position:relative;
}
#header h1.header a{
float:left;
display:block;
width:163px;
height:37px;
}
#header h1.header span{
background: url(../images/common/logo.gif) no-repeat;
position: absolute;
width: 163px;
height: 37px;
}
I feel like there is one style declaration I'm missing, but I cannot figure it out. Issue resolved using forum search. Thanks for having such great resources - I just had to search for a while. |
|||||||