|
CSS - Creating A Psuedo News/blog Setup
I'm creating a website in html/css, and I hope this is the correct forum for this issue. I'm not expecting anyone to explain exactly how to do this, but maybe just a point in the right direction as I haven't been able to search for this correctly.
Essentially I currently have a list of news items on the front page of my site. I want there to be a small indicator beneath each of these news items that says "comments (#)" where # is number of user comments about that news item. If this is clicked it would take the reader to a different page with the full news article and below it a list of the comments. It seems like some kind of wordpress implementation might work here but I have no idea where to look for something like this. Sorry if that was a little hard to understand, but I can't post urls yet to help explain. Thanks in advance! Similar TutorialsTrying to create a table psuedo class so that the specific attributes apply to the target table. Not sure if my syntax is correct. What I would like is to call the ID DataTable and have it cascade thru the tr, td...... Here are my tags: #DataTable { width:auto; border-collapse: collapse; border:1px solid #cccccc; border-spacing :20px;} #DataTable tr { border-spacing:20px;} #DataTable td.headerDescription{ width: 240px;} #DataTable td.fundCell { width: 240px; text-indent:40px;} #DataTable td.percentageCell { width: 60px; vertical-align:middle; text-align:center; border-right:1px solid #cccccc;} #DataTable td.seperator { border-top:1px solid #cccccc;} #DataTable td.assetCategory { width: 240px; text-indent:20px; vertical-align:middle;} #DataTable td.headerColumn { font-weight:bold ; width:40px; background-color:#F0F0F0 ; text-align :center;} #DataTable td.leftHeaderColumn { font-weight :bold ; width:40px; background-color:#E0E0E0 ; text-align :center ; border-left:1px solid #cccccc;} #DataTable td.assetClass { width: 240px; vertical-align:middle; font-weight :bold;} #DataTable td.performanceCell { width:60px; background-color:#E0E0E0 ; text-align :center ; vertical-align :middle;} I want display a paragraph of which all the lines are indented except for the first line. I tried the following CSS: Code:
.myclass:first-line {
text-indent: 0;
}
.myclass {
text-indent: 6em;
}
This achieves the reverse, only the first-line is indented. Can someone help? Hey guys, I usually have a friend that helps me slice up my templates and write the CSS and some html for my sites, however he's been MIA and I can't seem to figure this out. I've followed several CSS slicing guides, but the templates used are far simpler than the template I'm trying to make happen. I'm wondering if anyone would be willing to slice this up for me and do the basic coding for it! Haha I'm seriously at a loss. Thank you for your time! I have created a css file to make the a printable page. This works fine. I was wondering if there is a way (using css) to make the page automatically load up in landscape format rather than portrait? Thanks in advance wabirdman Hi XP pro SP2 Macromedia dreamweaver CS3 Found this solution for setting the position of a background image in a cell. I am mostly busy with firefox amd ieexplorer 6 to,... what is the beat 8 ? Select the cell. Then in Properties specify the background image. It'll repeat, but if you now set up a CSS for the TD tag and select 'no repeat', it'll go back to one image. You can also set the position in the same window. I'm sure the experts will say it's a scrappy way of solving the problem, but it works. And that's what counts. The other advantage is that you can have different images in each cell. This seems like an easy way to do it, but how do I set up a CSS for the TD tag for this specific cell? Lynghonning :-) td.special { background-repeat:no-repeat; background-image: url(pakke.jpg); } .... <td class="special"> Note - no caps on 'special'. I cant get it to work. Also the code I found here conserning BG images for netscape didnt do it either. Any suggestions greatly appreciated. Cheerio Chris Hi to all, and thanks a million in advance for help. I have developed a simple online cms and everything is setup correctly but i am stuck at one place. I am unable to make width to 100% when b div is empty i mean a div = 50% width, b div = 50% width, how set it up that when a div is empty then b div goes to 100%width and when b div is empty then a div is 100% width. i hope got my question. because currently i have set in this way. wrapper div = 980px width, a div = 50% width, b div = 50% width, wrapper div end so when a div is empty then b div is still present and that area is empty it destroy the whole look. thanks arsslan Hi, I've been stuck for days now just trying to setup how I want to layout my page. What I am trying to get is the BODY of the page to pretty much just contain everything. The I want to put a frame around all the content so that a small rectangle gradient image that I made will expand as needed to fill the browser window. Then finally I want a DIV wrapper that will hold all the page content. Here is my latest attempt to do this; Code: html, body {
margin: 0;
color: black;
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
padding: 0;
text-align: center;
}
div#frameBG {
top:0;
left:0;
z-index: 1;
}
div#wrapper {
margin: 0 auto;
width: 900px;
text-align: left;
z-index: 2;
}
div#logo {
position: relative;
top: -760px;
border: 0;
padding: 0;
}
div#leftCol {
width: 150px;
position: relative;
top: -580px;
left: 0px;
border: 2px;
padding: 10px;
background-color: #CCCC00;
text-align: center;
}
Code: <HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="style-test.css">
</HEAD>
<BODY>
<DIV id="frameBG"><img src="images/dk-green-rect.jpg" width="100%" height="100%"></DIV>
<DIV id="wrapper">
<DIV id="logo"><img src="images/header_01.jpg"></DIV>
<DIV id="leftCol">
<DIV> ...bunch of stuff here </DIV>
<DIV> ...bunch of stuff here </DIV>
<DIV> ...bunch of stuff here </DIV>
</DIV>
</DIV>
</BODY>
</HTML>
Using that I can at least get the content in the wrapper to appear over the background, but.... I get extra white space below and to the left of the background as I add more content. ...and, having to use -580px to position my stuff where I want it doesn't make sense for this. Someone suggested just putting the background in the BODY and leave out the BGframe but then the graphic repeats instead of stretching. Any help here???? Hello, I'm new to CSS. I've been developing a website in PHP. I have a report that is meant to be printed. It is formated for printing. However, if the user doesn't have his/her browser print page margins set to a max of 0.25in then some of the printed area will get clipped off. Can CSS be used to control these margins on the page? I've been looking into this and have been lead to the media = "print" area. However, it only seems to be controling the webpage's body margins and not the browser's print page setup margins. I've gotten to the point of using the following style code on my page, but now I'm at a loss as to what to try next. Code:
<style type="text/css">
<!--
.style1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14pt;
}
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 14pt;
}
body {
margin-left: 15px;
margin-top: 15px;
margin-right: 15px;
margin-bottom: 15px;
}
.style4 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16pt;
font-weight: bold;
}
.style15 {font-size: 10pt}
.style21 {font-size: 18pt}
.style24 {font-size: 24pt}
.style25 {font-size: 16pt}
.style28 {font-size: 12pt}
-->
</style>
<link href="file:///C|/Webs/ures/k058_styles.css" rel="stylesheet" type="text/css">
<style type="text/css" media="print">
<!--
.style19 {font-size: 14pt}
.style29 {font-family: Arial, Helvetica, sans-serif; font-size: 10pt; }
.style22 {font-size: 9pt}
.style23 {font-size: 12pt; font-family: "Times New Roman", Times, serif;}
.styleprint {
margin: 0in 0in 0in 0in;
margin-top: 0in;
margin-left: 0in;
}
-->
</style>
I added the ".styleprint" style to the page only to try and control the browser's print page setup margins. What you see above are actually two attempts to do this. Like I said above the margin settings seem to only be contoling the margins on the displayed page and not the browser's print page setup margins. How can I control the browser's print page setup margins? CAN I control the browser's print page setup margins? If I cannot, what do you do to make sure that the user can print a "printer formated" page with the correct margins? Thanks, Paul I have a page with content on the left and a menu with "latest" news sitting directly under it. When the pages get longer, when you scroll down there is whitespace there. So I want the "latest news" section to follow the page, however, when I set the position to fixed the news overlaps the menu.. only to be made worse by the fact that I use jquery's accordion plug-in. I'm a new member so I can't directly post a link..but freezerburned dot org /tikigaq.com/old.php I'm out of ideas. Thanks for the help. Hi Guys, Thanks to some incredible pointing me in the right direction yesterday, i have finally got to my 3-col layout that I want. The only issue is now my news box will let content role behind it, but really i want it to push down as with the footer bar! Can anyone point me in the right direction please? Stylesheet below and output at www.generating-sets.com/index.new2.php PHP Code: html {height:100%;} body { margin:0; padding:0; height:100%; background-image:url(bgs.gif); background-position:top right; background-repeat:repeat-y; background-color:#ffffff; font-family: Times, "Times New Roman", serif; } #wrap { background-image:url(bg.gif); background-position:top left; background-repeat:repeat-y; min-height:100%; } * html #wrap {height:100%} #header { background-image:url(label2.gif); background-position:right; background-repeat:no-repeat; background-color: #000066; border-bottom: 2px #ffffff solid; color: #ffffff; margin:0; padding:0; height:80px; } p {margin:5px; padding:0;} h1 { position:relative; line-height:80px; margin:0; padding-left:20px; } #left { float:left; width:150px; color: #ffffff; text-align:center; background-color: #000066; } #main { position:relative; margin-left:200px; } #right { float:right; width:10px; text-align:center; color: #ffffff; background-color: #000066; } #content { padding:5px; margin-right:200px; text-align:left; } #clearfooter { clear:both; height:80px; overflow:hidden; } #footer { height:40px; background-color: #000066; border-top: 2px #ffffff solid; margin:0; padding:0; margin-top:-0px; color: #ffffff; text-align:center; } div#newsbar {padding: 1%; text-align: center; height:150px; background-color: #000066; color: #ffffff; margin-left: +150px; margin-right: +10px; margin-top: -190px; border: 2px #ffffff solid; width: auto;} code { font-size:0.8em; border:1px solid navy; background-color:white; color:#333333; padding:10px; display:block; width:80%; margin:10px auto; overflow:auto; } There must be a reason why it works like it does, but i don't know!! Charlie OK well I figured that instead of spamming the forums I would post my two problems here. First problem: www.djoj.net/home.html www.djoj.net/style.css I am trying to replace my Tables with Div's... but when I do they overlap. Is there something I am missing? The margin property is not spacing them out according to eachother... um... wait... OK nvm, I just thought of the problem... position: relative; (I think) NEXT (left that there in case someone decides to search the forum) www.djoj.net/home.html www.djoj.net/style.css I have a hip-hop news script which loads the news from rapbasement.com Unfortunatly, in Firefox the headlines are being effected by my CSS somehow... this normally wouldent be a problem but it is making the text larger and it is making everything out of line. Help? Thank you. I am trying to set up my post using a wordpress template I found on alexking.org called Blue Radiant. All was going well until I decided to make a few test news posts and it started doing something funky. http://www.unlimitedzelda.net If you view the site in Internet Explorer, it's fine. However if you view it in FireFox, you can see that all but the most current news post gets pushed under the left nav bar. I can't figure why and I hope someone else will be able to help me out. Any input is greatly appreciated. Hello, I used to run a blog at vritti.net which I took down completely and am nearing the final steps in finishing off the new product. A peek can be had at what is coming at http://www.vritti.net/mt/main I want to make 2 aesthetic changes to the main text area ? 1. Give the text some space to breathe in and 2. Encase the text rectangle in a rounded rectangle so that it gives something solid for the racquet (and other randomly generated images) to lean on. I request you for this help. Thank you. ciao, abhi C I have a b2 evolution blog that I'd like to alter a bit. I'd like to be able to widen the area where the content is displayed so there isn't so much wasted space on each side. How would I go about doing this? If you need to see the site: http://www.foreverpurple.com/blog/crab_blog.php hi there! i got some trouble in using div for my blog... i think my problem is somewhere here...but i still can't figure out! Code:
<!-- Content Box -->
<div id="content" style="width: 366; height: 393; font-family: tahoma; font-size: 8pt; color: #FFFFFF; font-weight: normal; z-index: 3; line-height: 14px; overflow: auto; position: absolute; left: 519; top: 117; background-color: transparent; border: 0px solid #000000 padding: 13px">
</div>
<!-- End -->
<!-- Menu -->
<div id="menu" style="width: 100px; height: 80px;
border: 0px solid #000000;
font-family: tahoma; font-size: 8pt; color: #ffffff;
font-weight: normal; z-index: 3; line-height: 14px;
text-align: justify; overflow: hidden; padding: 13px;
position: absolute; left: 350px; top: 135px; background-color: transparent;">
<div style="cursor: move; font-family: tahoma; font-size: 8pt; font-weight: normal; color: #ffffff; width: 74px; length: 87px; background-color: "transparent"
onClick="document.getElementById('content').innerHTML=document.getElementById('rant').innerHTML" transparent">
<p align="center"><font color="#CC0099">:</font><font color="#FFCC99">: bLog :</font><font color="#CC0099">:</font
</div>
<div style="cursor: move; font-family: tahoma; font-size: 8pt; font-weight: normal; color: #ffffff; width: 74; height: 12"
onClick="document.getElementById('content').innerHTML=document.getElementById('profile').innerHTML"
<p align="center" transparent"><font color="#CC0099">:</font><font color="#FFCC99">: profiLe :</font><font color="#CC0099">:</font>
</div>
<div style="cursor: move; font-family: tahoma; font-size: 8pt; font-weight: normal; color: #ffffff; width: 80; height: 14"
onClick="document.getElementById('content').innerHTML=document.getElementById('shout').innerHTML"
<p align="center" transparent"><font color="#CC0099">:</font><font color="#FFCC99">: sHout oUt :</font><font color="#CC0099">:</font>
</div>
<div style="cursor: move; font-family: tahoma; font-size: 8pt; font-weight: normal; color: #ffffff; width: 74; height: 13"
onClick="document.getElementById('content').innerHTML=document.getElementById('blogsters').innerHTML"
<p align="center" transparent"><font color="#CC0099">:</font></font><font color="#FFCC99">: bLogsters :</font><font color="#CC0099">:</font>
</div>
<div style="cursor: move;
font-family: tahoma;
font-size: 8pt;
font-weight: normal;
color: #ffffff;
background-color: "transparent"
onClick="document.getElementById('content').innerHTML=document.getElementById('info').innerHTML"
<p align="center"><font color="#CC0099">:</font><font color="#FFCC99">: bLog info :</font><font color="#CC0099">:</div>
<!-- End -->
<!--Content Proper -->
<DIV id=rant div class="blog" style="display:none;" >
<p align="left">
<Blog>
<DateHeader>
[date]
<p align="left"><br>
</DateHeader>
<b>[blog title]</b><br><br>
[body]
<DIV CLASS="exte">[extended entry]</DIV>
<DIV CLASS="extk">[extended keywords]</DIV>
</p>
<p align="left">
<em><br>
</em>
[author] grooved at
<em> [time]</em><br>[comments] [permalink] <br>
__________________________________________<br>
<p align="left">
<br><br><br>
[comment data]</Blog>
<table width="98%" align="center">
<tr>
<td width="33%">[previous page]</td>
<td width="33%" align=center>[bloghome]</td>
<td width="33%" align=right>[next page]</td>
</tr>
</table>
</div>
you can check the rest of the code at my test page: URL thanks in advance!!! Hi, I am importing a Word Press blog to a web site, but it looks kind of sloppy. You can see it here : What I need to do is just present the title, and maybe the first 100 characters, then have a "read more" link. Once this link is clicked, the full article will show on the same page. I think I might need to use a JavaScript library as well, but I know I will need some CSS. If someone could give me a general idea of how to go about this, I would appreciate it. Links and resources are also welcome. thanks OK, first off from a bad experience on another CSS Forum , I will have to begin with a disclaimer: The blog you're about to view is my original content. I did not steal this work. I did however use Photoshop brushes that were made by others to create my work. The credit is properly given to those people on my active blog. The blog that I'm having CSS/HTML problems with is INCOMPLETE, so you will not see any credits their yet. It is NOT MY REAL BLOG. I change the template there about every month with new experiements. It's sad that I have to take up so much time to write a disclaimer because too many people out their jump on the "YOU PLAGIARIZER - YOU DID IT" bandwagon. So, I was told by a very presumptious group of forum members to write a disclaimer in the future. Whew! Now that I got that outa the way......... I need help. This is the site I'm having trouble with. Main Index Template Sidebar Stylesheet I've been working on this same template for a week now. I'm not the type to ask for help. I'm very stubborn and prefer to do things on my own because it's usually faster and easier. But now I'm tearing my hair out - not able to figure out what I'm doing wrong. My blockquote is bleeding off the screen. I'll start with that for now. I've tried div's, widths, margins, paddings. Believe me, I've toyed with every possibility out there. Not only that, but I can't tell you how many "CSS/HTML" (including the w3 schools) help pages I've read out there. None of them have supplied what I need to know to fix my layout. If any of you have the slighest clue, please help. I'd really appreciate it!! Hi all, Home Page. Blog page. Site CSS file here. Hi all, could I get some help? There's a few things, and if we can do one thing at a time, I'd appreciate it. Ok, item 1, and this is in Firefox. Have a look at the Home Page. Then, have a look at the Blog page. Notice on the Blog page that "Navigation" is a few pixels too far to the right, and also a few pixels low compared to the Home page. Why? They're in the same CSS class. I don't understand why the right side in the blog is off like this. I'd appreciate any advice! Thank you, Chris Hello nice people. I'm new and excited to be here. My footer that is supposed to be placed at the bottom of my content and sidebar is placing it self about 600px or so below instead, causing a ridiculously long scroll down with a huge empty space in between the posts and the footer. Just looks awful. I can't figure out what's 'causing the problem. How do I fix this? I think the problem lies in these set of CSS, but I could be wrong... My blog is: thetissuetalk (at) blogspot (dot) com Code: /* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width:1000px;
margin:0px auto 0px;
padding:8px;
text-align:left;
}
#content-wrapper {
width: 1000px;
}
#main-wrapper {
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
margin:30px 250px auto 115px; padding:0 120px 0 0;
}
#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
position:relative; top:-6600px; right:40px; padding:20px 20px 0px 5px; width:220px; color:#333; background:#F0F0F0; font:normal 12px/14px "Trebuchet MS","Lucida Grande","Lucida Sans Unicode",Arial;
}
#menu { width:167px; margin:0px 0 40px 30px; padding:0; text-align:center; }
#menu ul { padding:0; margin:0; }
#menu li { font:bold 12px/14px Arial,Helvetica,"Trebuchet MS"; letter-spacing:2px; list-style:none; margin:-3px 0; padding:5px 0; }
#menu li a, #menu li a:visited { display:block; color:#FAFAFA; background:#D0D0D0; text-shadow:0 0 4px #FAFAFA; margin:0 2px 0 1px; padding:5px 5px 4px 5px; border:0; text-decoration:none; text-transform:uppercase; -moz-border-radius:8px; -khtml-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; }
#menu li a:hover { color:#fff; background:#C5C5C5; text-shadow:0 0 3px #B5B5B5; }
#menu .current_page_item a, #menu .current_page_item a:visited { color:#fff; background:#C5C5C5; text-shadow:0 0 3px #B5B5B5; }
#menu ul ul li { margin:3px 2px 0 10px; padding:0; line-height:11px; }
#menu .rss a, #menu .rss a:visited { color:#B3B3B3; background:#ddd url(http://2.bp.blogspot.com/_k_DnmK4oz2Q/S1u4oxWZhnI/AAAAAAAAAkQ/rkns3Lq9mC8/s1600/rss.png) no-repeat 37px center; text-shadow:0 0 0; padding-left:20px; }
#menu .rss a:hover { color:#A9A9A9; background:#E7E7E7 url(http://2.bp.blogspot.com/_k_DnmK4oz2Q/S1u4oxWZhnI/AAAAAAAAAkQ/rkns3Lq9mC8/s1600/rss.png) no-repeat 37px center; text-shadow:0 0 0; }
Thanks! |
|||||||