Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    May 2009
    Posts
    852
    Thanks
    129
    Thanked 24 Times in 24 Posts

    Issues with clearing a papragraph

    I have a site and on the members page, the paragraph will not clear for the videos to sit properly. Ive tried everything I can think of. Does anyone know how I can clear the paragraph pls?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <meta content="members of Hubb support group, own page" name="description" />
    <meta content="Members of Hubb" name="keywords" />
    <meta content="Polly" name="author" />
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <title>Hubb support group members page</title>
    <link href="styles/style.css" rel="stylesheet" type="text/css" />
    <link  href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah%7CSpecial+Elite%7CPangolin%7CLato" rel="stylesheet" /></head>
    <body>
    <div id="container">
    <div id="content">
    <div id="header">	
    <div id="navmenu">
    <ul>
    <li><span class="tagtitle">"Helping Us Bounce Back"</span></li>
    <li><a href="index.html">Home</a></li>
    <li><a href="news.html">News</a></li>
    <li><a href="contacts.html">Contacts</a></li>
    <li><a href="members.html">Members</a></li>
    <li><a href="policies.html">Policies</a></li>
    <li><a href="links.html">Links</a></li>
    </ul>
    </div>
    <div id="leftheader">
    <h1><span>Hubb</span></h1>
    </div>
    <div id="rightheader">
    <p class="space">
    Meeting address<br />
    Baptist Church Hall<br />
    Main Road Romford RM1 3BL<br />
    Hubb Secretary 0798 598 3673</p>
    </div>
    </div>
    <div id="content2">
    <h2>Members area</h2>
    <p class="background3">On these pages you can add your <br/>donated contributions of poems, budget 
    recipes, <br/>testimonials, money saving tips, stories, photos or<br/>
    whatever you would like to see? A message board?<br/>
    Let me know use the <a href="contacts.html">contact form</a> or submit your <br/>contributions 
    at our next meeting.</p><p class="volunteer2">Osmosis mental illnesses videos</p><br/>
    <div id="motivational" style="left: 495px; top: -241px"><img alt="Motivational quote - you are beautiful" src="images/you%20are%20beautiful%20cloud.jpg"
     style="width: 100px; height: 107px" /><span class="clear"></span></div>
    <iframe frameborder="0" height="220" src="https://www.youtube.com/embed/wuSGzGgd4KA?list=PLY33uf2n4e6Oj4cpUEMnh3_P5xvxS5QCx" width="400">
    </iframe>
    <iframe frameborder="0" height="220" src="https://www.youtube.com/embed/PURvJV2SMso?list=PLY33uf2n4e6Oj4cpUEMnh3_P5xvxS5QCx" width="400">
    </iframe>
    <p>
    <iframe frameborder="0" height="220" src="https://www.youtube.com/embed/QhukM33VLgo" width="400">
    </iframe>
    <iframe frameborder="0" height="220" src="https://www.youtube.com/embed/YxELZyA2bJs?list=PLY33uf2n4e6Oj4cpUEMnh3_P5xvxS5QCx" width="400">
    </iframe></p>
    <iframe frameborder="0" height="220" src="https://www.youtube.com/embed/I8Jofzx_8p4" width="400">
    </iframe>
    <iframe frameborder="0" height="220" src="https://www.youtube.com/embed/hzSx4rMyVjI" width="400">
    </iframe>
    </div>
    <div id="footer">
    <ul>
    <li><a href="index.html">Home</a> | </li>
    <li><a href="contacts.html">Contact</a> |</li>
    <li><a href="members.html">Members</a> |</li>
    <li><a href="news.html">News</a> | </li>
    <li><a href="links.html">Links</a> | </li>
    <li><a href="policies.html">Policies</a>|</li>
    <li><a href="sitemap.html">Sitemap</a></li>
    </ul>
    <p>Copyright &copy; 2016 - 2017, HUBB All Rights Reserved.</p>
    </div>
    </div>
    </div>
    </body>
    </html>
    the css
    Code:
    {
    	padding: 0;
    	margin: 0;
    }
    
    html, body {
    	font-size: 1em;
    	background-color: #fff;
    	height: 100%;
    	font-family: Lato;}
    	
    #container {
    	margin: 0 auto;
    	width: 100%;
    	position: relative;/* IE6 hack */
    	height: auto !important;
    }
    
    #header {
    	width: 99.8%;
    	min-height: 1%;
    	display: inline-block;
    	margin: 0;
    	padding: 0;
    	background: #FFFFFF;
    }
    
    #leftheader {
    	width: 48%;
    	float: left;
    	position: relative;
        padding: 0; margin:0;
    }
    #rightheader{
    width: 48%;
    float: right;
    text-align: right;
    position: relative;
    }
    #motivational {
    	float:left;
    	width: 28%;
    	position: relative;
    }
    .clear{
    	clear:both;
    }
    
    p.space  {
    background-image:url("../images/bigger_box.jpg");
    background-repeat: no-repeat;
    padding: -40px; margin :0;
    float:right;
    font-family: 'Pangolin', cursive;
    width: 300px; height:200px;
    position: relative;
    
    }
    p.space2 {
    background-image:url("../images/box.jpg");
    width: 248px; height: 200px;
    background-repeat: no-repeat;
    padding: 0; margin:0;
    
    }
    .background{
    	background-image: url("../images/bigger_box.jpg");
    	background-repeat: no-repeat;
    	width: 300px;
    	height: 200px;
    	float:right;
    font-family: 'Pangolin', cursive;
    
    }
    .background2{
    	background-image: url("../images/biggest_box.jpg");
    	background-repeat: no-repeat;
    	width: 350px;
    	height: 112px;
    	padding: 20px;
    }
    .background3{
    	background-image: url("../images/large_box.jpg");
    	background-repeat: no-repeat;
    	width: 392px;
    	height: 197px;
    	padding: 20px;
    }
    
    p.volunteer, p.volunteer2{
    	font-family: "Gloria Hallelujah", cursive;
        color: #71C42B;
    	width: 90%;
        font-size: 1.25em;
        margin: 0; padding-left:5px;
        background-image: url("../images/mid_box.jpg");
        background-repeat: no-repeat; 
    }
    
    p.volunteer2 {
    	clear: both;
    }
    .tagtitle {
    	color: #00FF00;
    	font-size: 1.40em;
    	padding-right: 8em;
    	font-family: 'Gloria Hallelujah', cursive;
    	display: inline-block;
    }
    
    #content {
    	width: 98%;
    	margin: 0 auto;
    	height: auto;
    	margin-left: 10px;
    	background: #FFF;
    }
    #content2 {
    	width: 98%;
    	height: auto;
    	overflow: hidden;
    padding-left: 10px;
    }
    
    #leftside {width: 35%;
        height: auto;
        float:left;
        display:inline-block;
        margin:0;}
    
    #rightside {width: 35%;
        height: auto;
        float:right;
    }
    #left {width: 48%;
        height: auto;
        float:left;
        display:inline-block;
        margin:0;}
    
    #right{width: 48%;
        height: auto;
        float:right;
        position: relative;
    }
    
    
    #paypal {float: right; 
    margin: 0; padding-bottom: 1.5%;
    background-position: top right;
    }
    
    p {
    	margin-bottom: 6px;
    }
    
    h1 {
    	font-size: 4em;
    	color: #336699;	
    	margin-left: 10px; padding-top: 5px;
    	font-family: "Special Elite", cursive;
    }
    	
    
    h2 {
    	font-size: 2.5em;
    	color: #01243B;   
    	font-family: Pangolin, cursive;
    	padding: 0; margin: 0; 
    }
    h3 {
       border-bottom: 3px solid #71C42B;
       padding-bottom: 3px;
       line-height: 1em;
       font-size: 1.75em;
       color: #9DA7B2; width: 70%;
       font-family:"Gloria Hallelujah", cursive;
       }
    
    #navmenu {
    	width: 100%;
    	float: left;
    	background-image: url("../images/torn_image_nav.gif");
    	background-repeat:repeat;
    	height: 49px;
    	padding: 0; margin:0;
    }
    #navmenu ul {
    	margin: 0;
    	padding: 0;
    	float: right;
    	display: inline-block;
    }
    #navmenu li {
    	display: inline-block;
    	font-weight: bold;
    	margin-left: -0.25em;
    	
    }
    #navmenu a {
    	text-decoration: none;
    	border-left: 2px solid white;
    }
    #navmenu li:first-child a {border:none;}
    
    #navmenu a:hover {
    	font-weight: bold;
    }
    
    #navmenu ul li a {
        padding: 7px;
    	color: #FFFFFF;
    	display: inline-block;
    	text-align: center;
    	font-size: 1.25em;
    	font-family: 'Pangolin', cursive;
    }
    
    #navmenu ul li a:hover {
    	 color: #71C42B;
    }
    ul.bullets{
    	padding-left: 2%;
    	list-style-image: url("../images/bullet.png");
    	background-position: top center;
    	background-repeat: no-repeat;
    }
    ul.news {padding: 7px;
    	color: #000000;
    	display: inline-block;
    	font-size: 1em;
    	list-style-type: none;
    	}
    ul.news li {
    	border-left: 1px solid gray;
    	padding: 10px;
    }
    ul.news li a:hover {
    	 background: #15B869;
    }
    
    .download {
    	color: red;
    	font-size: 1em;
    	font-weight: bold;
    }
    
    #footer {
    	height: 30px;
    	width: 100%;
    	text-align: center;
    	font-size: 0.88em;
    	font-family: 'Pangolin', cursive;
    	border-top: 6px solid #71C42B;
    }
    
    #footer li {
    	display: inline;
    	text-decoration: none;
    }
    
    .small {
    	 font-size: small;
    }
    p.caption {
    	font-size: small;
    	text-align:center;
    }
    p.caption2 {
    	font-size:small;
    	text-align: center;
    	float:left;
    }
    a:link {
    	color: black;
    	text-decoration: none;}
    a:hover {
    	color: blue;
    }
    a:visited {
    	 color: purple;
    }

  2. #2
    New Coder
    Join Date
    Mar 2017
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Working good but I did not understand why you use paragraph tag? Is this make any point? Why you use paragraph tag for videos?

  3. #3
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    2,160
    Thanks
    2
    Thanked 314 Times in 304 Posts
    1) This is 2017 not 1997, STOP making tranny documents; since "transitional" LITERALLY means "in transition from 1997 to 1998 development practices". Put a HTML 5 doctype on it, lose the outdated XHTML style closures/practices, means you can stop saying type="" on elements that obviously have a type, and results in an overall smaller document.

    2) Stop making endless pointless DIV for nothing. For example UL is a perfectly good block level container, it doesn't need a redundant DIV around it.

    3) What makes "helping us bounce back" part of the list of choices - if anything shouldn't that be a subsection of the main heading or something. There is NO reason for it to be in the list grammatically.

    4) You have a DIV around all those floated iframe, so just give it float wrapping behavior with overflow:hidden;

    5) It's copyright copyright? Really? Use the symbol or the word, not both. Also as of 2010 you no longer have to say the years on a website, it is assumed to be active to the current year.

    6) what in blazes makes two iframe a grammatical paragraph? Why not just restrict the width of the parent container and let natural wrapping do it's job? The same can be said for all those garbage manual <br> inside the actual content text... or the image doing text's job on what should clearly be a blockquote.

    All that said, your document structure both as if HTML didn't exist AND with HTML applied doesn't make a lick of sense.

    Guessing a bit wildly since I'm missing your background images, but a MODERN codebase for that would looks something more like this:

    Code:
    <!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
    <meta
    	name="viewport"
    	content="width=device-width,height=device-height,initial-scale=1"
    >
    <link
    	rel="stylesheet"
    	href="template/screen.css"
    	media="screen,projection,tv"
    >
    <title>Hubb support group members page</title>
    </head><body>
    
    <div id="top">
    
    	<h1>
    		Hubb<br>
    		<small>Helping Us Bounce Back</small>
    	</h1>
    	
    	<ul id="mainMenu">
    		<li><a href="index.html">Home</a></li>
    		<li><a href="news.html">News</a></li>
    		<li><a href="contacts.html">Contacts</a></li>
    		<li><a href="members.html">Members</a></li>
    		<li><a href="policies.html">Policies</a></li>
    		<li><a href="links.html">Links</a></li>
    	</ul>
    	
    	<div class="address">
    		Baptist Church Hall<br />
    		Main Road Romford RM1 3BL<br />
    		Hubb Secretary 0798 598 3673
    	<!-- .address --></div>
    	
    	<div id="content">
    		<h2>Members area</h2>
    		<p>
    			On these pages you can add your donated contributions of poems, budget recipes, testimonials, money saving tips, stories, photos or< whatever you would like to see? A message board? Let me know use the <a href="contacts.html">contact form</a> or submit your contributions at our next meeting.
    		</p>
    		<blockquote>
    			<p>Motivational Quote - You are Beautiful</p>
    		</blockquote>
    		
    		<div class="videos">
    			<h2>Osmosis mental illnesses videos</h2>
    			<iframe
    				src="https://www.youtube.com/embed/wuSGzGgd4KA?list=PLY33uf2n4e6Oj4cpUEMnh3_P5xvxS5QCx"
    				width="400" height="220" 
    				frameborder="0"
    			></iframe>
    			<iframe
    				src="https://www.youtube.com/embed/PURvJV2SMso?list=PLY33uf2n4e6Oj4cpUEMnh3_P5xvxS5QCx"
    				width="400" height="220" 
    				frameborder="0"
    			></iframe>
    			<iframe
    				src="https://www.youtube.com/embed/QhukM33VLgo"
    				width="400" height="220" 
    				frameborder="0"
    			></iframe>
    			<iframe
    				src="https://www.youtube.com/embed/YxELZyA2bJs?list=PLY33uf2n4e6Oj4cpUEMnh3_P5xvxS5QCx"
    				width="400" height="220" 
    				frameborder="0"
    			></iframe>
    			<iframe
    				src="https://www.youtube.com/embed/I8Jofzx_8p4""
    				width="400" height="220" 
    				frameborder="0"
    			></iframe>
    			<iframe
    				src="https://www.youtube.com/embed/hzSx4rMyVjI"
    				width="400" height="220" 
    				frameborder="0"
    			></iframe>
    		<!-- .videos --></div>
    		
    	<!-- #content --></div>
    	
    	<div id="footer">
    		<hr><!-- since you have no numbered heading for this section -->
    		<ul>
    			<li><a href="index.html">Home</a></li>
    			<li><a href="contacts.html">Contact</a></li>
    			<li><a href="members.html">Members</a></li>
    			<li><a href="news.html">News</a></li>
    			<li><a href="links.html">Links</a></li>
    			<li><a href="policies.html">Policies</a></li>
    			<li><a href="sitemap.html">Sitemap</a></li>
    		</ul>
    		&copy; HUBB All Rights Reserved.
    	<!-- #footer --></div>
    	
    <!-- #top --></div>
    
    </body></html>
    Assuming the whole layout were to have a max-width. If only the content are and any sidebar were to be max-widthed then you'd target #content or add a wrapping div around #content and the sidebar's content. I would retain #top for consistency and easy of styling.

    Everything else would belong in the external stylesheet, but without the images and a general idea of where you are trying to go with that on style -- much less a proper idea of the semantic relationship of that "Helping us bounce back" text that just seems slopped into the page in a non-semantic manner. (again why I just blindly guessed as to what it's for)... remember, logical document structure and semantics BEFORE you even THINK about goofing around with making layout!
    I would rather have questions that can't be answered, than answers that can't be questioned.
    http://www.cutcodedown.com

  4. #4
    Regular Coder
    Join Date
    May 2009
    Posts
    852
    Thanks
    129
    Thanked 24 Times in 24 Posts
    Hi deathshadow
    Thank you for your comments, I can see that html5 is the way to go it is just taking me a while to learn it all.

  5. #5
    Regular Coder
    Join Date
    May 2009
    Posts
    852
    Thanks
    129
    Thanked 24 Times in 24 Posts
    I do have a problem with the 'helping us bounce back as I want it to lay alongside - the list and that is the only way it would do it. I am learning html5 and am changing bits as I go, but time is not on my side. If you remember when you were learning you had to research many sites to find anything good. Even the WC3 site told me to use main but it does not work. I can certainly lose the div for the frames but styling the quote in a blockquote I am not sure how to get it to lay right unless it is in a div
    Last edited by quartzy; 08-12-2017 at 03:02 AM.

  6. #6
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    2,160
    Thanks
    2
    Thanked 314 Times in 304 Posts
    Quote Originally Posted by quartzy View Post
    I do have a problem with the 'helping us bounce back as I want it to lay alongside - the list and that is the only way it would do it.
    Helping you do that would mean understanding what you mean by "alongside" -- since that could mean almost anything... but really that's a task for the CSS NOT the HTML if using HTML correctly and creating a logical document structure. In that way I have no idea how that text has anything to do with anything from a grammatical/structural standpoint, the ONLY standpoint that means a thing when writing the markup.

    Content dictates markup, content + markup + device capabilities dictates layout.

    I've got the nasty feeling you're worrying about appearance and layout FIRST and trying to shoe-horn the HTML and CSS to fit a preconceived notion, instead of focusing on NON-VISUAL meaning and grammar first. As common an approach to building a website as that may be, it is philosophically and logically backwards if you understand the POINT of HTML... or why CSS is separate from HTML (and should when possible be kept in a separate file with a media target on the <link>)

    Really though if you're worried about positioning it, that's what CSS is for. I can't tell you what CSS to use unless I have a clearer idea how you are trying to arrange your elements, and what you've presented so far just feels like things are being thrown in any old way with no regards for what HTML is even designed to do or how a document should be structured.

    Since your base structure and content order should be organized to make sense even if HTML and every visual style applied to it didn't even EXIST. THEN you apply the semantic HTML tags (basically everything other than DIV and SPAN) to say what things ARE structurally and grammatically. Only then do you add DIV, SPAN, classes, ID's, and CSS to create your layoutS - YES, PLURAL.

    Since with the plethora of screen sizes and device capabilities, you don't just slop out one fixed layout and call the job done.

    WHAT is that text? Is it a heading for a section? Is it part of the universal heading for all pages on the site? Is it flow text meaning a paragraph. It just feels like a unrelated fragment thrown in there any-old-way for Christmas knows what reason... The type of thing a graphic artist or marketing executive might get all happy in their pants over, but doesn't really serve a purpose on a website other than just getting in the way.

    Hence why I treated it as a sub-text receiving de-emphasis in the header, as I'd assume it's more of a tagline?
    Last edited by deathshadow; 08-12-2017 at 08:54 AM.
    I would rather have questions that can't be answered, than answers that can't be questioned.
    http://www.cutcodedown.com

  7. #7
    Regular Coder
    Join Date
    May 2009
    Posts
    852
    Thanks
    129
    Thanked 24 Times in 24 Posts
    Hi Deathshadow
    Thanks for your comments but cannot help feeling that you are just criticising and not helping. Of course I would like to do things properly it just takes time but you failed to take note of those comments.

  8. #8
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    2,160
    Thanks
    2
    Thanked 314 Times in 304 Posts
    I'm just saying I'd need more information on WHY it's going where you want, and WHERE it is you want it. Your posts came across as vague. Again "alongside" could mean almost anything... and since the document structure would be dictating the HTML order, we need to know WHAT that text is and WHY it is in the page before we can even think about where it goes in the layout and how to put it there.

    What is it? Why is it there? Where are you trying to put it? You're not providing a lot of details... meaning anything anyone answers is a wild guess.
    I would rather have questions that can't be answered, than answers that can't be questioned.
    http://www.cutcodedown.com

  9. Users who have thanked deathshadow for this post:

    quartzy (08-14-2017)


 

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
  •