papillonstudios Posted November 8, 2010 Share Posted November 8, 2010 I am using the absolute tag to create a layout for my wordpress posts, but i also want to be able to to have the posts displayed like on a normal wordpress site would(one after the other) but still keep all my current styling. how do I do this? ex. FIRST POST Date: September 1, 2010 First Post on my blog [end post] SECOND POST Date: September 2, 2010 My Second Post on my blog [end post] Link to comment https://forums.phpfreaks.com/topic/218145-absolute-help/ Share on other sites More sharing options...
Hybride Posted November 9, 2010 Share Posted November 9, 2010 The posts are shown by a loop, so unless you're styling the posts themselves, the layout should have no real effect on it. Do you have a sample to go by what you want? Link to comment https://forums.phpfreaks.com/topic/218145-absolute-help/#findComment-1132073 Share on other sites More sharing options...
papillonstudios Posted November 9, 2010 Author Share Posted November 9, 2010 ok if you u go here http://redbarradio.com/rbr2 I have the styling for the post there and here is my css code. I want it to look like that but have a bunch of them in a scrolling list. .datebg { background-image:url(images/date.png); width:125px; height:37px; position:absolute; right:0px; top:30px; z-index:8; } .date { font-size:9px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; color:#7bced3; position:absolute; left:17px; top:11px; } .post h2 a { font-family:Impact; color:#FFF; font-size:30px; text-decoration:none; font-weight:100; position:absolute; top:30px; left:30px; } .post small { color:#CCC; position:absolute; top:60px; left:30px; font-size:12px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; } .post small a { text-decoration:none; color:#666; font-weight:lighter; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; } .entry { position:absolute; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; top:90px; left:30px; font-weight:100; font-size:13px; color:#999; margin-right:10px; margin-bottom:15px; width:650px; line-height:17px; } .entry .readmore { margin-top:50px; border:none; } .entry .newer { margin-top:50px; margin-left:170px; } .entry .newer { } .post img { margin:10px; float:left; } Link to comment https://forums.phpfreaks.com/topic/218145-absolute-help/#findComment-1132083 Share on other sites More sharing options...
papillonstudios Posted November 9, 2010 Author Share Posted November 9, 2010 I just thought to try using position:relative; because if i understand correctly it positions elements relative to their original position. So I tried that but it didnt work so well all the posts still overlapped. Link to comment https://forums.phpfreaks.com/topic/218145-absolute-help/#findComment-1132088 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.