Site is not in correct structure.

Discussion in 'HTML & Website Design' started by holkapolka, May 10, 2015.

  1. #1
    Hi, i use dreamweaver CS. site is reincarnashown.com and the two portofolio sites are not lined under the other site, they are more on the right, i need to have all pictures and stuff right below eachother, i added "center" but no help.

    Andreas H
     
    Solved! View solution.
    holkapolka, May 10, 2015 IP
  2. #2
    Your textarea within the form (in the second table) is breaking out of the allowed max width because the high value of cols. You should remove the cols property and set the width instead. Here an example how this can look like.
    <textarea style="width:100%" id="message" class="input" name="message" rows="22"></textarea>
    Code (markup):
    In order to make sure the inputs and textareas have the same width you can set a width for the class input within your CSS file:
    .input { width: 100%; }
    Code (markup):
    Both approaches solve the issue that your page width breaks out of the wanted fixed width what took care of the centered boxes appear to be too much on the right.
     
    Wasi88, May 10, 2015 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #3
    @Wasi88 is on the right track, though you might want to target it with slightly less than 100% width so that there's room for the borders.

    That said, that page has a LOT of issues, like static style in the markup, endless pointless scripttardery for nothing, attributes like ALIGN that have no business on any website written after 1997, nested blockquotes, gibberish use of numbered headings, tables for layout, overstuffed keywords meta with low content relevance, massive images doing text's job, pointless classes (like the class="input" on all your form elements)... you'd almost think you were using some rubbish WYSIWYG or "preview pane" garbage to build a website.

    Oh wait. You said Dreamweaver -- Well there's your problem! -- the only thing you can learn from Dreamweaver is how NOT to build a website. PROBABLY why if this is typical of what you are doing for site development you shouldn't be making sites for other people yet either.

    Just to show you what I mean, properly formed HTML for a page like that should probably go something like this:

    <!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
    
    <meta
    	name="viewport"
    	content="width=device-width; height=device-height; initial-scale=1.0"
    >
    
    <meta
    	name="description"
    	content="Does reincarnation really exist? We make sites to show our clients earlier reincarnations."
    >
    
    <meta
    	name="keywords"
    	content="reincarnation,past,life,story,experience"
    >
    
    <link
    	rel="shortcut icon"
    	href="favicon.ico"
    >
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="screen.css"
    	media="screen,projection,tv"
    >
    
    <title>
    	Reincarnashown - Is reincarnation true?
    </title>
    
    </head><body>
    
    <div id="top">
    
    	<h1>
    		<a href="/">
    			Reincarnashown
    		</a>
    	</h1>
    
    	<blockquote id="topQuote">
    		<p>
    			"To know theyself is the hardest anyone of us can ever do"
    		</p><p>
    			-- <cite>Socrates</cite>
    		</p>
    	</blockquote>
    
    	<div id="pastLife">
    		<h2>Who were you in your past life?</h2>
    		<p>
    			Contact us with your information and we will try to find out who you were in your earlier life/lives. Add history, interests and as much info as you can for a detailed search.
    		</p>
    	<!-- #pastLife --></div>
    
    	<div class="standout">
    		<h2>
    			<a href="/">
    				Reincarnation shown. Who were you in your past earlier lifes experiences?
    			</a>
    		</h2>
    		<p>
    			Reincarnation is true and can be considered a fact. When a child is inside the stomach of his/hers mother, the conditions are same as for most elderly who are towards reincarnation in this planet or similar. Ones spine is downwards, ones mind in fantasy and the size of ones self decreases. In our face we can see what we have become either by chosen or unchosen acts. Some say that some people look like monkeys, others like pigs and so on.
    		</p><p>
    			If you have emotions and thoughts having nothing to do with your current life, you do not get those when under drugs or alcohol it may be an indication of your past life. Send us an email and we will try to gather information to see who you were in your previous life...
    		</p>
    	<!-- #reincarnationShown --></div>
    
    	<div class="leadingSubsection">
    		<h2>Documentary:  Life after death</h2>
    		<p>
    			About rebirth from National Geographic. A new documentary. Some interviews with persons and facts about past life can be seen on this documentary called "Life after death".
    		</p>
    		<a href="videoreincarnation.htm" class="videoLink">
    			CLICK HERE TO WATCH THE DOCUMENTARY
    		</a>
    	<!-- .leadingSubsection --></div>
    
    	<div class="trailingSubsection">
    		<h2>Documentary: In Another Life.</h2>
    		<p>
    			An old documentary from USA. They  explain the subject matter about reincarnation. Some speak of old experiences, stories and other things that can associate with reincarnation.
    		</p>
    		<a href="videoreincarnation2.htm" class="videoLink">
    			CLICK HERE TO WATCH THE DOCUMENTARY
    		</a>
    	<!-- .trailingSubsection --></div>
    
    	<div id="portfolio">
    
    		<h2>
    			Portfolio of websites we have made for other private customers
    		</h2>
    
    		<ul>
    			<li>
    				<a href="http://www.therealfreddykrueger.info">
    					The Real Freddy Krueger.info
    					<img src="images/realFreddy.jpg" alt="Freddy Krueger">
    				</a>
    			</li><li>
    				<a href="http://www.activemember.info">
    					Active Member.info
    					<img src="images/activeMember.jpg" alt="ActiveMember.info">
    				</a>
    			</li>
    		</ul>
    
    	<!-- #portfolio --></div>
    
    	<form id="contactForm" action="#" method="post">
    		<h2>Contact Us</h2>
    		<p>
    			WE WILL REPLY WITHIN 1 MONTH FROM THE TIME YOU SEND US YOUR INFORMATION. WE WILL ALSO CONTACT YOU BEFORE/IF WE PUBLISH.
    		</p>
    		<fieldset>
    			<label for="contactName">Your Name:</label><br>
    			<input type="text" id="contactName" name="name"><br>
    			<label for="contactMail">Your E-Mail:</label><br>
    			<input type="text" id="contactMail" name="email"><br>
    			<label for="contactMessage">Your Message:</label><br>
    			<textarea id="contactMessage" name="message" rows="22" cols="60"></textarea><br>
    			<input type="submit" class="submit" value="Send email">
    		</fieldset>
    	</form>
    
    	<div id="footer">
    		<hr>
    		ElectroniX, 3802 Boe Telemark. Andreas Harkiolakis<br>
    		0047 41617899 | contact@reincarnashown.com
    	<!-- #footer --></div>
    
    <!-- #top --></div>
    
    </body></html>
    Code (markup):
    A LOT of the stuff you were wasting images on having no business in images, adding a proper/logical heading structure, and swinging an axe at the 1990's style tables for layout. EVERYTHING else belongs in an external stylesheet -- even if the site is only a single page... that way if people revisit the page or you have subpages that share some of the same elements you can leverage caching.

    If I have time later I may do one of my infamous rewrites of your page with a full code breakdown/explanation to show you what I mean. Said page is pretty simple so it shouldn't take long when I sit down to actually do it. You've got broken methodologies and design choices that means you have an uphill battle to be device neutral or accessible; two things that are a must-have for any new website in this day and age.

    ... and seriously, do yourself a favor, de-install that train wreck of mouth-breathing idiocy known as Dreamweaver, make microwave art out of it's DVD, toss the manuals in a wood stove, and learn to program HTML and CSS properly. The methodology you are using and choice of tools are just leading you down the path to failure.
     
    Last edited: May 10, 2015
    deathshadow, May 10, 2015 IP
  4. holkapolka

    holkapolka Well-Known Member

    Messages:
    623
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    145
    #4
    Thanks for your reply but i have no idea what to do.. I only use dreamweaver and dont know how to code.
     
    holkapolka, May 10, 2015 IP
  5. holkapolka

    holkapolka Well-Known Member

    Messages:
    623
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    145
    #5
    is it possible to send the htmls, 3 of them, for someone here to do the fix for me, i can pay through paypal.
     
    holkapolka, May 10, 2015 IP
  6. Wasi88

    Wasi88 Active Member

    Messages:
    56
    Likes Received:
    4
    Best Answers:
    2
    Trophy Points:
    55
    #6
    Payment received and modified files sent. Deal done.
     
    Last edited: May 11, 2015
    Wasi88, May 11, 2015 IP
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #7
    That pretty much means you have no business using Dreamweaver in the first place -- though honestly that bloated overpriced steaming pile of crap does NOTHING but delude people who aren't qualified to have websites into thinking they can "design" them; particularly if you are relying on that dumbass "preview pane" WYSIWYG crap...

    Did Wasi88 do a proper semantic rewrite of your pages, or did he throw useless silver bullet fixes at it with the result still being an inaccessible mess?

    Sorry that rewrite took longer for me to post up, currently got wires coming out of my head for an ambulatory EEG so life's been busy... but here's what I would be doing for that same page:

    http://www.cutcodedown.com/for_others/holkapolka/template.html

    The directory is unlocked:
    http://www.cutcodedown.com/for_others/holkapolka/

    for easy access to the bits and pieces. It's elastic (adjusts to the default browser or OS font size), semi-fluid (has a maximum width to prevent long lines from being hard to follow while still adjusting down smaller) and responsive (the layout re-arranges itself based on the available screen size) -- try resizing your browser window (assuming you are in something modern) to see the responsive part in action; it strips off elements and columns to best fit the display. IT's also gracefully degrading images off with a proper logical document structure.

    I'd normally write up a section by section breakdown to explain it, but if you don't know HTML or CSS that would probably be gibberish, but that's why if that is in fact the case you probably shouldn't be trying to make websites in the first place. Not your fault really, scam artist BS like most Adobe products and an industry filled with even bigger scumbag scammers have become very good at packing people like yourself so full of sand you could change your name to Sahara.

    To be honest if the copy that's up live right now is the "fixed" version, given how broken it is you were just taken for a ride by something that I wouldn't even have charged money for. Silver bullet "fixes" aren't the answer, it ends up being like trying to patch up a gunshot wound with chewing gum.
     
    deathshadow, May 12, 2015 IP
  8. Wasi88

    Wasi88 Active Member

    Messages:
    56
    Likes Received:
    4
    Best Answers:
    2
    Trophy Points:
    55
    #8
    I get your point deathshadow and I do agree on a lot of your statements, but it doesn't seam to be the case that he actually wants to get into it that deep (at least not for now). I just made the quick fix I was talking about in my first reply what he has considered being the 'best answer' (before I responded to his request on changing the html files). I used the second approach and 99% instead of 100%. Honestly, I don't think that your approach is really worth the effort because he will likely change those files within dreamweaver again without knowing what he is doing. Just ask yourself: Why in the hell would he even ask for help on implementing such an easy and straight forward approach like mine, if he would actually be interested in learning at least something about html and css? Well, there you go. He was willing to pay for it, I considered the amount to be high enough for the work I have to do. He gets his fix. Everyone is happy. I'm not here to insult anyone. It's just my point of view in regards to the certain conflict of interest you two seam to have (at least in regards to html and css).
     
    Wasi88, May 12, 2015 IP
  9. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #9
    Yeah, unfortunately, there are millions of those pages out there - which shouldn't be there at all. Urk. I did something similar yesterday - helped a customer set up WAMP on his box - and he was gonna go with Dreamweaver, since that was what they'd been given as a starting program at his school. I tried to tell him not to use it, but he said that it was a requirement, and that he couldn't change it. THAT made me really, really sad.
     
    PoPSiCLe, May 13, 2015 IP
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #10
    Which is why it's too early for the OP to even be making sites, using DW (not that there is EVER a legitimate reason to crap out sites in DW), and why we need to educate these people instead of letting them continue to be scammed. Again, the only thing that can be considered professional grade tools in Dreamweaver are the people promoting it's use!

    I mean if you aren't even going to try to learn how it's done, why are you even going to try and do it? The ONLY reason I can figure is someone blowing smoke up the OP's backside and telling them mouth-breathing halfwit bekaptah nonsense like Dreamweaver actually serves a legitimate purpose other than deluding people who shouldn't be building websites into thinking they can.

    Actually just makes me wonder why in hell they'd be trying to do stuff like make a website if they're not interested in learning HOW! That's part of why things like Dreamweaver are halfwit scam artist bullshit we need to stamp out, instead of encouraging the camel mannered tunic wearing mollycoddles.

    I'm just really tired of seeing the same mistakes year after year, very quickly turning into decade after decade.

    Particularly when it comes to examples like @PoPSiCLe's where it makes me want to go down to the local college and thin out the staff's numbers with a shotgun.
     
    deathshadow, May 13, 2015 IP