January 27, 201016 yr I'm designing my first site and I'm trying to create template page with all the elelments the whole site is likely to use. I've got a domain, but not yet uploaded anything. A problem I'm having is that the layout is fine when the Firefox or IE window is maximised, but as you make the window smaller the divs on the page shift around from being side-by-side to going one on top of another. I'm told you can do a work around by using like, a 1px div at the dop and bottom of the page with a minimum width to kind of 'brace' the page. I'm not sure how best to do this though. Also, IE doesn't recognise min-widths if I understand what I've been reading correctly? Any advice is appreciated : )
January 27, 201016 yr Though, it would be better if you, a least, Copy-n-Pasted your HTML and CSS code here.
January 27, 201016 yr Author <!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> 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: 0%; width: 100%; min-width: 100%; } #menu{ width: 100%; background: #990000; margin-top: 80px; float: left; clear: both; } #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: 5px; padding: 5px; float: left; clear: both; display: block; } .newsbox{ display: block; width: 75%; background: #990000; margin-top: 5px; padding: 5px; float: right; } .picbox{ display: block; background: #ffcc33; padding: 4px; margin-top: 7px; float: right; clear:right} .quotebox{ display: block; 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:right; } .datespan{ font: bold 15pt Arial, sans-serif; letter-spacing:1pt; color:#ffcc33}
January 27, 201016 yr In HTML after <ul> <li><a href="#">Home</a></li> <li><a href="#">On tour</a></li> <li><a href="#">Media</a></li> </ul> add <div class="inter"> </div> In CSS add wherever you want .inter {line-height: 1px; width: 890px;} and change box widths .widgetbox{ width:[b]30%[/b]; background: #990000; margin-top: 5px; padding: 5px; float: left; clear: both; display: block; } .newsbox{ display: block; width: [b]65%[/b]; background: #990000; margin-top: 5px; padding: 5px; float: right; } Edited January 29, 201016 yr by Sam G added [code] tags
January 27, 201016 yr Author Thanks, but that doesn't seem to work? It perhaps preserves the layout if you make the window a bit smaller, but as you make it smaller still; the divs shift about again
January 27, 201016 yr You should always specify a width to a floated element. The reason your divs are shifting about when you shrink the window is because only the right floated elements have width. When there's less than 75% of the window available they reflow. If you add width:20% to the quotebox CSS, the divs will stay in position. Hope that helps
January 27, 201016 yr Author You should always specify a width to a floated element. The reason your divs are shifting about when you shrink the window is because only the right floated elements have width. When there's less than 75% of the window available they reflow. If you add width:20% to the quotebox CSS, the divs will stay in position. Hope that helps Hmmm, tried that, no effect. Just to clarify, I want everything object on the page to stay in its place in relation to the other objects when the window is decreased in size. At the moment, everything just shifts so that the objects are stacked high instead of being side-by-side
January 28, 201016 yr Look, it works in IE8, FF 3.5.7 for 1024x800 CSS: .inter {line-height: 1px; width: 900px;} .widgetbox{ width:30%; background: #990000; margin-top: 5px; padding: 5px; float: left; clear: both; display: block; } .newsbox{ display: block; width: 65%; background: #990000; margin-top: 5px; padding: 5px; float: right; } 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 class='inter'> </div> </div> <div id='container'> <div class="inter"> </div> <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 style="clear:both"></div> </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>
January 28, 201016 yr Author Maybe its a resolution issue then. I see it works when you minimise the window, but if you make it smaller still everything moves. I'd prefer elements of the page to just be out of view than the browser rearrabging everything to fit in the small window.
January 28, 201016 yr I see it works when you minimise the window, but if you make it smaller still everything moves. Minimise? Smaller still? Are you talking about the size in pixels of the browser window, or the zoom level of the browser? And which browser(s) have you tried this on? Can you post (a) screen shot(s)?
January 28, 201016 yr I think I see the problem here - the width of your twitter box is inconsistently defined. There's a CSS style of width:30% and an inline style of width:250px The inline style always wins and that's why your divs are reflowing when you make the window smaller. Take the inline styling out and you'll be fine. Also, what browser are you using? Is it IE7?
January 28, 201016 yr Author I think I see the problem here - the width of your twitter box is inconsistently defined. There's a CSS style of width:30% and an inline style of width:250px The inline style always wins and that's why your divs are reflowing when you make the window smaller. Take the inline styling out and you'll be fine. Also, what browser are you using? Is it IE7? Ah that'll be it! Yeah IE7 as I'm in work : \
January 28, 201016 yr Author Nope, no good I'm afraid. Take www.webdesignerforum.co.uk for example, everything is layed out nicely and then if you make the window smaller by dragging the right hand corner inwards rather than things being rearranged to fit in the smaller widow, you just see less of the page
January 28, 201016 yr you need to use px instead of %. this way everything will have a set size and will stay in place no matter what size the browser window.
January 28, 201016 yr Author you need to use px instead of %. this way everything will have a set size and will stay in place no matter what size the browser window. Works like a charm, thanks Darrenbale! Just gotta work out how many pixels to set it to now : \
January 28, 201016 yr Give your container div a fixed size. The other elements within this container will then have a width which are 20% of the container etc, rather than the browser window. Ignore this post - I see you've changed it already and fixed it now
Create an account or sign in to comment