January 25, 201016 yr Hi there. I recently started to learn CSS after having learned a load of HTML. I've bought a domain so that I can have something tangible to try my css out on. What I've done so far isn't online yet, as I'm trying to sort out one page with all my website's elements on it. Having many problems, stuff is displaying incorrectly in IE, apparently in my mate's Firefox too - even though it looks fine on mine (me=PC he=Mac) He tells me I'm not clearing my floats and that I should be specifying widths and also something about not using display: block. I've only been learning for a couple of weeks, so if someone could take a look at my code and tell me, in layman's terms what I'm doing wrong I'd really appreciate it. I can paste here or email folder with all files etc?
January 25, 201016 yr No problems mate - please upload your site to your domain and link us to it and I will have a look through for you Tel
January 25, 201016 yr Author I wish it was that simple! I don't know how to upload it to the domain, as its been bought on my behalf. I could email files? Or paste here?
January 25, 201016 yr oh ok, fair enough - well post up your html in one set of CODE tags and your css in another and I will take a look
January 25, 201016 yr Author Obviously you wont have the images, but here's the HTML <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Dashboard Fans, a Dashboard Confessional Fan Site</title> <link rel="stylesheet" href="stylesheet.css" type="text/css"> </head> <body> <div id='menu'> <ul> <li><a href="#">Home</a></li> <li><a href="#">On tour</a></li> <li><a href="#">Media</a></li> </ul> </div> <div id='container'> <div class='widgetbox'><script src="http://widgets.twimg.com/j/2/widget.js" type="text/javascript"> </script> <script type="text/javascript"> new TWTR.Widget({ version: 2, type: 'profile', rpp: 4, interval: 6000, width: 250, height: 300, theme: { shell: { background: '#333333', color: '#ffffff' }, tweets: { background: '#000000', color: '#ffffff', links: '#4aed05' } }, features: { scrollbar: false, loop: false, live: false, hashtags: true, timestamp: true, avatars: false, behavior: 'all' } }).render().setUser('chriscarrabba').start(); </script></div> <div class='newsbox'> <h1>News goes here</h1> <span class="datespan">25/01/2010.</span> <p>Welcome to dashboardfans.com, a fan site dedicated to all things Dashboard Confessional. <p>At dashboardfans.com you'll find all the latest Dashboard Confessional news, reviews, pics and videos, tabs, chords and tour dates. <p>The site was started in January 2010 as a means of putting into practice what HTML and CSS I had learned. If you have any suggestions for the site, or to submit a news tip, photo, video or link, contact me at markhooson@gmail.com. <p>Cheers, <p>Mark </div> <div class='newsbox'> <h1>Older news here</h1> <span class="datespan">24/01/2010.</span> <p><a href="#">This is how links look.</a></p> <p>Below is how pictures will look.</p> <div class='picbox'><img src="dc.jpg" alt="Dashboard Confessional"></div> </div> <div class='quotebox'> <blockquote>"This is a quote box."</blockquote> </div> <div class='newsbox'> <h1>Alter The Ending, (late) review</h1> <span class='datespan'>23/01/10</span> <p>THERE is a kind of generally accepted wisdom amongst DC fans that Chris Carrabba's previous effort, The Shade of Poison Trees, was a truer Dashboard sound than its predecessor, Dusk and Summer. <p>For many, Dashboard Confessional will principally be about Chris and an acoustic guitar, but I found Dusk and Summer a fantastic evolution from fan-favourite A Mark, A Mission, A Brand, A Scar. For this reason, TSOPT felt like a missed opportunity to me, as though it was more about Chris proving to the hardcore DC fans he hadn't "lost it" following the gloss and polish of Dusk and Summer. Anyways, it should come as no surprise then, that I loved Alter The Ending, apparently picking up where Dusk left off to deliver a perfect clutch of pop rock ballads with all the angst and emotion of Chris' early work set against the accessible and catchy hooks of more recent years. <p>'Get Me Right' is a song Chris had been playing on the road for what felt like forever, and as Alter's opening track it is something of a misdirection. Although it's a great track, Get Me Right is tonally separate from its peers. Escalating from its hushed palm muting and almost sinister intro "Out of the thickest pine, across the county line" to its sweeping and euphoric choruses flanked with pounding drums and synth noises, the track succeeds in reminding us of Chris' diversity. <p>From here on in, we're into Dusk and Summer part 2. <p>Until Morning is a note-perfect pop rock song, with echoes of Vindicated. With the arrival of Everybody Learns from Disaster we're in full swing, up-tempo and up-beat, the third track is another sing-along classic. The album's first single, Belle of The Boulevard, is a slower more powerful affair that sticks after one listen. <p>Following that, I Know About You offer a different kind of pop with stirring choruses. In a departure for the band, a guitar solo in the last quarter makes it a stand-out track. I could easily hear the album's title track "Alter The Ending', another pounding and up beat anthem wailed by Taking Back Sunday's Adam Lazzarra. Blame It On The Changes is this Album's 'Stolen'. Subtle and subdued at first before reaching stadium rock proportions. Even Now is a song that fans also got an early peek at before this album's release. A more traditional Dashboard track, the song sees Chris doing what he does best, reminiscing on former loves. <p>The Motions is a surprise. Sounding more like a Motion City Soundtrack song, Motions is kinetic and refreshing - the kind of Dashboard experiment I prefer. <p>The trio of songs which bring the album to a (quieter) close are not to be skipped. No News Is Bad News, Water and Bridges and Hell On The Throat tend to get lost on an album of such strong pop songs, but should not be overlooked. <p>The fact that the deluxe version comes with an alternate disc of all the songs stripped down to just Chris and an acoustic will please fans old and new, and I often can't decide which I prefer. Alter The Ending is a welcome return after TSOPT' lull. </div> <div class='footer'>Contact dashboardfans.com: <a href="mailto:markhooson@gmail.com">markhooson@gmail.com</a> Follow us on Twitter: <a href="www.twitter.com/dashboardfans">@dashboardfans</a></div> </body> </html> Edited January 25, 201016 yr by MAHooson
January 25, 201016 yr Author And the CSS, Sorry for the massive block of text body{background-image:url('banner.gif'); background-repeat:no-repeat; background-position: top center; font-family: Gill, Helvetica, sans-serif; background-color: #ffcc33;} body{color:#ffcc33; margin: 1em; padding: 3em; text-align: justify;} p{margin:0; padding:5px; font-size:95%; line-height:1.3em; text-align:left;} a:link {color:#ffcc33;text-decoration:underline;} a:visited {color:#ffcc33;text-decoration:none;} a:hover {color:#ffffff;text-decoration:underline;} a:active {color:#ffcc33;text-decoration:none;} blockquote {margin: 0; padding: 5px; font-size: 120%; font-style: italic; color: #ffffff;} h1{font-size:30px; text-align: left; margin-top: 0px;} #container{ margin-left: 0%; margin-right: 0%; margin-top: 1%; width: 100%; } #menu{width: 100%; background: #990000; margin-top: 80px } #menu ul{ margin: 0; padding: 0; float: left; } #menu ul li{ display: inline;} #menu ul li a{ float: left; text-decoration: none; color: #ffcc33; padding: 1px 11px; background-color: #990000; } #menu ul li a:visited{ color: #ffcc33;} #menu ul li a:hover { color:#ffffff} .widgetbox{ width:22%; background: #990000; margin-top: 1px; padding: 5px; float: left; } .newsbox{ width: 75%; background: #990000; margin-top: 5px; padding: 5px; float: right } .picbox{ background: #ffcc33; padding: 7px; margin-top: 7px; float: right; } .quotebox{ background: #000000; margin: 5px; margin-top: 7px; margin-left: 0px; float: left; border: 7px solid #333333; } .footer{ width: 100%; background: #990000; margin-top: 10px; padding: 2px; float: left; } .datespan{ font: bold 15pt Arial, sans-derif; letter-spacing:1pt; color:#ffcc33}
January 25, 201016 yr ok cool - I will have a look later on from home, i'm at work at the minute though - if someone else takes a look before me then coolies Catch you later
January 25, 201016 yr Author ok cool - I will have a look later on from home, i'm at work at the minute though - if someone else takes a look before me then coolies Catch you later Thanks for the time! If anyone else wants to chip in before then, I'd be very grateful Edited January 25, 201016 yr by MAHooson
January 25, 201016 yr Author Thanks for the time! If anyone else wants to chip in before then, I'd be very grateful Possibly resolved, exerimented with clear: left and clear: right and it now seems to be displaying correctly in IE and Firefox
January 25, 201016 yr Ah cool - good times mate - I had just started to look at the code - well done on getting it fixed tho mate
January 26, 201016 yr Author Right, with that resolved, I have another issue(!) When I resize my window, all my divs shift from being side-by-side to one on top of another. This is a pain. Apparently I can rectify with "min-width: XXXpx" Can anyone offer advice on how best to do it? Thanks
Create an account or sign in to comment