www.webdeveloper.com
Results 1 to 7 of 7

Thread: DIVs aren't going all the way over

  1. #1
    Join Date
    Jun 2005
    Posts
    24

    DIVs aren't going all the way over

    I have a site that I have designed and now I'm trying to convert it into HTML so that I can create a word press template.

    My issue is though my site look fine in the browser on my computer it does not look fine on my cell phone.

    My two divs at the bottom are not going all the way across to the right. The weird thing is the div above them does but the bottom div do not. I have take these divs and put them in a blank html document and they work fine but in my page they do not work.

    I truly need some extra eyes to help me resolve the issue.
    My Webpage

    This is how it looks on my cell phone and I have two android phones and it looks the same on both Screenshot

  2. #2
    Join Date
    Dec 2002
    Location
    Seattle, WA
    Posts
    1,843
    neither one is actually filling the full width of the page (my screen resolution: 1440x900). Considering you are not using float or anything that would require you to define a width for the divs in question. you can drop the width declaration altogether or set it with a value of 100%.

  3. #3
    Join Date
    Jun 2005
    Posts
    24
    ok I will try this and get back to you! Thanks for you input!

  4. #4
    Join Date
    May 2014
    Posts
    670
    Quote Originally Posted by misslilbit02 View Post
    I have a site that I have designed and now I'm trying to convert it into HTML so that I can create a word press template.
    If you're trying to convert it to HTML, my question would be what have you designed? Do you mean you drew some pretty picture in Photoshop or some other paint program before you had semantic markup of your content or a reasonable facsimile of future content? If so, I hate to break it to you, but IMHO you've designed only two things.

    As to your 'page', it really does reek of the PSD first approach to "not actually making a useful website". The massive space wasting backgrounds, lack of anything resembling actual content, inaccessible fixed width layout, illegible fancy fonts, absurdly undersized fixed metric (px) fonts in what little content is present... it's an accessibility mess and the antithesis of good design.

    No matter how pretty it is... and it IS pretty and shows off some good paint program skills; unfortunately that has absolutely nothing to do with building a useful website... PARTICULARLY if you care about mobile.

    Under the hood, it gets worse. Presentational markup, presentational images in the markup, images split apart for no fathomable reason, no media targets, static scripting in the markup, scripting for nothing, static style in the markup, DIV for nothing, little if anything resembling semantic markup or logical document structure, tables for layout, attributes like BORDER and TARGET that have no business on any website written after 1997, etc, etc...

    Basically whatever you've been learning from has led you down the garden path to failure by skipping over a lot of the fundamentals of actually building a website.

    The proper process for making a useful site is to take your content or a reasonable facsimile of future content and put it into a logical order in a text editor as if HTML and CSS never even existed. You then add semantic HTML (tags saying what things are as opposed to what it looks like) to the markup to make it useful for non-CSS users (screen readers, braille readers, search engines)... From there you use CSS with media targets (via the MEDIA attribute on LINK) and media queries (to change the layout based on available screen space and/or device capabilities) adding any semantically neutral styling hooks (DIV and SPAN) as needed. Then and only then should you be thinking about opening up the paint program to make the graphics hung on the layout or enhance the page with scripting.

    ... and the reason for this is simple, people don't visit websites for the graphics hung on the content, they visit FOR the content, hence why the sane and rational approach to development is a "content FIRST" approach. I've NEVER seen a website where the "designer" sat around drawing pretty pictures in Photoshop EVER led to an accessible website that worked well across different screen sizes, much less provided basic accessibility features like dynamic fonts, elastic and semi-fluid layout, etc, etc... By definition Photoshop is a tool for pushing pixels around, and pixel sizes have nothing to do with accessible web design.

    Sorry if that seems harsh, but you've been led astray. Yes, what you did is very pretty, but unfortunately it has nothing to do with actually building a website, particularly if you care about mobile users, desktop users... well... users. There's a reason the big success stories of the Internet -- Amazon, eBay, Google, Facebook -- are not exactly a visual 'tour de force'. They have content of value delivered in a reasonably accessible manner (kind-of) to users. If you think they had a PSD jockey sitting around making pretty pictures to build their sites, you'd be pretty far off the mark.

    So again, sorry if this seems harsh, but I'd highly recommend tossing EVERYTHING you've done so far, and start over with your content or a reasonable facsimile, mark it up semantically, then bend it to your will with CSS for all the different appearances and device sizes you need, BEFORE even THINKING about going to a paint program.

    Well, maybe not everything... but just as an example, if I was creating markup for that same page, it would go something like this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html
    	xmlns="http://www.w3.org/1999/xhtml"
    	lang="en"
    	xml:lang="en"
    ><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    />
    
    <meta
    	http-equiv="Content-Language"
    	content="en"
    />
    
    <meta
    	name="viewport"
    	content="width=device-width; height=device-height; initial-scale=1.0"
    />
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="screen.css"
    	media="screen,projection,tv"
    />
    
    <title>
    	Shaping Lives and Changing Destinies - Eternal Change Ministries
    </title>
    
    </head><body>
    
    <div id="top" class="widthWrapper">
    
    	<h1>
    		Eternal Change Ministries
    		<span>-</span>
    		<small>Changing Lives, Shaping Destinies</small>
    	</h1>
    
    	<ul id="socialLinks">
    		<li>
    			<a href="https://www.youtube.com/channel/UCZ-SCP4Jm-M-_K-rZ6YaeHQ">
    				<img src="images/youtube.jpg" alt="Youtube" />
    			</a>
    		</li><li>
    			<a href="https://www.facebook.com/cynthia.r.thompson.92">
    				<img src="images/fb.jpg" alt="FaceBook" />
    			</a>
    		</li>
    	</ul>
    
    <!-- #top.widthWrapper -->
    
    <div id="homeBanner"><div class="flipper flipControls_forwardBack">
    	<img src="slides/slide1.jpg" alt="ECM's School of the Gifts Boot Camp" />
    	<img src="slides/slide2.jpg" alt="Preorder your copy today of The Power of a Prophetic Mindset" />
    <!-- .widthWrapper, #homeBanner --></div></div>
    
    <div id="content" class="widthWrapper">
    	<h2>Thanks for visiting</h2>
    	<p>
    		You were created to manifest God's goodness and his glory in the earth. Whether you have experienced rejection, abandonment, low self-esteem, or abuse God's desires for you to be "Eternally Changed" by His power.
    	</p><p>
    		Eternal Change is a day to day journey and I want to help you to become whole and move from one level to the next. You don't have to settle! Pain is only intended to push you and not lead you. Its purpose is to make you discover the great possibilities and promises of living a life of "Eternal Change".
    	</p><p>
    		Prophet Cynthia has prepared a special video for you. Please click on the video on your left to play.
    	</p>
    <!-- #content.widthWrapper --></div>
    
    <div id="footer"><div class="widthWrapper">
    	<ul>
    		<li>HOME</li>
    		<li>ABOUT PROPHETESS </li>
    		<li>PROPHETIC WORD </li>
    		<li>CLT ENTERPRISES</li>
    	</ul><ul>
    		<li>ECM TRAINING CENTERS</li>
    		<li>UPCOMING EVENTS</li>
    		<li>PROPHETIC INTENSIVE</li>
    		<li>STORE</li>
    	</ul><ul>
    		<li>BECOME A PARTNER</li>
    		<li>MEDIA KIT</li>
    		<li>SCHOLARSHIPS</li>
    		<li>CONTACT US</li>
    	</ul>
    	<div>
    		<a href="https://www.youtube.com/channel/UCZ-SCP4Jm-M-_K-rZ6YaeHQ">
    			<img src="images/youtube.jpg" alt="Youtube" />
    		</a>
    		<a href="https://www.facebook.com/cynthia.r.thompson.92">
    			<img src="images/fb.jpg" alt="FaceBook" />
    		</a>
    		<br />
    		Copyright 2014 Eternal Change Ministries. All Rights Reserved.<br />
    		Designed By: Personality Web Designs.
    	</div>
    <!-- .widthWrapper, #footer --></div>
    
    <script type="text/javascript" src="scripts/elementals.js" />
    <script type="text/javascript" src="scritps/eFlipper.js" />
    
    </body></html>
    Basically a full third the markup... EVERYTHING else being done there

    If I have time later this morning (insomnia mixed with non-24 sleep-wake syndrome sucks) I'll toss together some CSS to see if I can try and at least address some of the problems without a complete "pitch it in the bin"... though really that massive image pushing the banner and content clear past the fold at anything smaller than 1200px tall needs to go.

  5. #5
    Join Date
    May 2014
    Posts
    670
    Oh my word -- SEVEN MEGABYTES? I didn't look that deep into it, but WOW. That's ten times what your average social-media and advertising laden site uses, and 100 times my normal ideal web page size. OUCH.

  6. #6
    Join Date
    May 2014
    Posts
    3
    Well, He should remain for work.

  7. #7
    Join Date
    Jun 2005
    Posts
    24
    ok I'm teachable. I would LOVE you help. I don't feel it's harsh if you're willing to be of assistance and get me on the right. I see it added value. Please let me know. Thanks!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles