UtterAccess.com
X   Site Message
(Message will auto close in 2 seconds)

Welcome to UtterAccess! Please ( Login   or   Register )

Custom Search
 
   Reply to this topicStart new topic
> Text Stops Wrapping Around Image...how To Fix?    
 
   
kruuth
post Feb 15 2016, 11:14 AM
Post#1



Posts: 849
Joined: 30-May 07



I have a CSS and some files and the problem is that the text will stay to the right of the image until the image ends. What do I need to do to the CSS in order to make it stay on the right where the image is? Here's the CSS, and the pages:

CSS:

CODE
body { background-color:#FFFFFF;
      color: #666666;
      font-family: Verdana, Arial, sans-serif;
      background-image:URL(background.jpg);
      padding:0px 20px;    
}
#wrapper {width: 80%;
    margin-right: auto;
    margin-left:auto;
    background-color:#90C7E3;
    min-width:700px;
    max-width:1024px;
    box-shadow: 5px 5px 5px 0px #000000;
}       
header { background-color: #000033;
         color: #FFFFFF;
       font-family: Georgia, serif;
}
main {background: #FFFFFF;
     margin-left: 170px;
     padding: 1px 0px 1px 0px;
}
main img{
          float:left;
          padding-right: 20px;
          padding-bottom: 20px;
}
main ul {list-style-position: inside;}
main div {
    padding-left:20px;}

h1 { line-height: 72px;
    background-image: URL(sunset.jpg);
    background-repeat:no-repeat;
    padding:0px 0px 0px 20px;
    background-position:right;
    margin-bottom:0;
    
}

nav { position: relative;
     font-weight: bold;
     float:left;
     width: 160px;
     padding: 20px 5px 0px 20px;
}
nav a {text-decoration: none;}
nav a:link{color:#000033;}
nav ul {list-style-type: none;
      margin: 0;
      padding-left: 0px;
}
li {
  text-align: left;
  font-family: Georgia,serif;
}

.content {position: absolute;
         left: 200px;
         top: 75px;
         font-family: Arial, sans-serif;
         width: 300px;
}
.clear {float:clear;}
nav a { text-decoration: none; }
nav a:link { color: #000033; }
nav a:visited { color: #344873 }
nav a:hover { color: #FFFFFF; }
nav ul { list-style-type: none;
}
h2 { color: #3399CC;
    font-family: Georgia, serif;
}
h3 { color: #000033;
}
dt { color: #000033;
    font-weight: bold;
}

.resort { color: #000033;
          font-size: 1.2em;
}
footer { font-size: 0.70em;
       text-align: center;
       font-style: italic;
       padding: 10px;
       margin-left: 170px;
       background-color: #FFFFFF;
}
header, nav, main, footer {display:block;}


HTML1:

CODE
<!DOCTYPE HTML>
<html>
<link rel="stylesheet" href="pacific.CSS">
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<body>


<div>
<div>

<h1>Newcome Resort</h1>


<ul>
    <li><a href="http://index.html" target="_blank">Home</a></li>
    <li><a href="http://tents.html" target="_blank">Tents</a></li>
    <li><a href="http://activites.html" target="_blank">Activites</a></li>  
    <li><a href="http://reservations.html" target="_blank">Reservations</a></li>
</ul>


<h2>The Tents at Newcome Resort</h2>
<img src="tent.jpg" alt="trees with a tent" width="320" height="250">
<div>
<dl>
<dt>What is a teny?</dt>
<dd>Our luxury tents are permanent structures four feet off the ground. Each yurt<br> has canvas walls, a wooden floor, and a roof dome that can be opened</dd>
<dt>How are the yurts furnished?</dt>
<dd>Each tent is furnished with a queen-sized bed with a down quilt and gas-fired<br> stove. The luxury camping experience also includes electricity and a sink with<br> a hot and cold running water. Shower and restrooms facilties are located in the<br> lodge</dd>
<dt>What should I bring?</dt>
<dd>Bring a sense of adventure and some time to relax! Most guest also pack<br> comfortable walking shoes and plan to dress for changing whether with layers<br> of clothing</dd>
</dl>  
</div>

Copyright 2014 Pacific Trails Resort<br>

<a href="mailto:johnsmith@johnsmith.com" target="_blank">John Smith</a>

</div>
</div>
</body></html>


HTML 2:

CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><META http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body>
<div>
<div>
<h1>Newcome Resort</h1>
<ul>
    <li><a href="http://index.html" target="_blank">Home</a></li>
    <li><a href="http://tents.html" target="_blank">Tents</a></li>
    <li><a href="http://activites.html" target="_blank">Activites</a></li>  
    <li><a href="http://reservations.html" target="_blank">Reservations</a></li>
</ul>


<div>
<h2>Activites at Newcome</h2>
<img src="http://trail.jpg" alt="at trail for running" width="320" height="250">
<h3>Hiking</h3>
<p><span>Pacific Trails Resort</span> has 5 miles of hiking trails and is adjacent to a state park. Go it
alone or join one of our guided hikes.</p>
<h3>Kayaking</h3>
<p>Ocean kayaks are availiable for guest use</p>
<h3>Bird Watching</h3>
<p>While anytimes is a good time for bird watching at Pacific Trails, we offer guided bird-
watching trips at sunrise several times a week.</p>
</div>

Copyright 2014 Newcome Resort<br>

<a href="mailto:johnsmith@johnsmith.com" target="_blank">John Smith</a>



</div>
</div>
</body></html>
Go to the top of the page
 
cheekybuddha
post Feb 15 2016, 12:15 PM
Post#2


UtterAccess Moderator
Posts: 11,870
Joined: 6-December 03
From: Telegraph Hill


Hi,

I'm not sure what you're after exactly. You don't use much of the CSS in your html.

With a couple of tweaks I got your HTML1 to look like the attached screenshot.

Where do you want the text to go? All around?

Please clarify, or use screenshots.

d
Attached File(s)
Attached File  2010215_kruuth.png ( 251.42K )Number of downloads: 3
 
Go to the top of the page
 
kruuth
post Feb 15 2016, 01:15 PM
Post#3



Posts: 849
Joined: 30-May 07



Sorry I should have clarified. I want it to stay right of the image.
Go to the top of the page
 
cheekybuddha
post Feb 15 2016, 04:46 PM
Post#4


UtterAccess Moderator
Posts: 11,870
Joined: 6-December 03
From: Telegraph Hill


Do you want something that looks more like this?
Attached File(s)
Attached File  20160215_kruuth_2.png ( 261.22K )Number of downloads: 2
 
Go to the top of the page
 
kruuth
post Feb 15 2016, 05:14 PM
Post#5



Posts: 849
Joined: 30-May 07



Yes...That's what I'm looking for.
Go to the top of the page
 
kruuth
post Feb 15 2016, 05:16 PM
Post#6



Posts: 849
Joined: 30-May 07



How did you do that? I was able to do it with tables but I need to do it via CSS
Go to the top of the page
 
cheekybuddha
post Feb 15 2016, 05:29 PM
Post#7


UtterAccess Moderator
Posts: 11,870
Joined: 6-December 03
From: Telegraph Hill


Here's the adjusted html:
CODE
<!DOCTYPE HTML>
<html>
  <head>
    <link rel="stylesheet" href="pacific.CSS">
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body>
    <div id='wrapper'>
      <h1>Newcome Resort</h1>
      <nav>
        <ul>
          <li>
            <a href="http://index.html" target="_blank">Home</a>
          </li>
          <li>
            <a href="http://tents.html" target="_blank">Tents</a>
          </li>
          <li>
            <a href="http://activites.html" target="_blank">Activites</a>
          </li>  
          <li>
            <a href="http://reservations.html" target="_blank">Reservations</a>
          </li>
        </ul>
      </nav>
      <main>
        <h2>The Tents at Newcome Resort</h2>
        <img src="cheekybuddha.jpg" alt="trees with a tent" width="320" height="250">
        <div style='margin-left:320px;'>  <!-- I added this style - you may want to move them into a class -->
          <dl>
            <dt>What is a teny?</dt>
            <dd>
              Our luxury tents are permanent structures four feet off the ground. Each yurt<br>
              has canvas walls, a wooden floor, and a roof dome that can be opened
            </dd>
            <dt>How are the yurts furnished?</dt>
            <dd>
              Each tent is furnished with a queen-sized bed with a down quilt and gas-fired<br>
              stove. The luxury camping experience also includes electricity and a sink with<br>
              a hot and cold running water. Shower and restrooms facilties are located in the<br>
              lodge
            </dd>
            <dt>What should I bring?</dt>
            <dd>
              Bring a sense of adventure and some time to relax! Most guest also pack<br>
              comfortable walking shoes and plan to dress for changing whether with layers<br>
              of clothing
            </dd>
          </dl>  
        </div>
      </main>
      Copyright 2014 Pacific Trails Resort<br>
      <a href="mailto:johnsmith@johnsmith.com" target="_blank">John Smith</a>
    </div>
  </body>
</html>

Changes:
1. I added wrapper id to first <div> in <body>
2. I removed the next nested <div>
3. I wrapped the menu <ul> in a <nav> element
4. I wrapped the <h2>, <img> and <div> containing the text in a <main> section
5. I added a margin-left style equal to the width of the image to the <div> containing the text
(I think that's everything!)

hth,

d
Go to the top of the page
 
cheekybuddha
post Feb 15 2016, 05:34 PM
Post#8


UtterAccess Moderator
Posts: 11,870
Joined: 6-December 03
From: Telegraph Hill


I just used the CSS you posted (named it as a file: pacific.CSS, in the same folder as the html file)

I only added one style to the <div> with the text after the image - margin-left: 320px; this is the same width as the image.

I used some of the elements already styled in the CSS (<nav>, <main>, #wrapper)

hth,

d
Go to the top of the page
 
« Next Oldest· Web Development· Next Newest »
 
Display Mode: Standard · Switch to: · Switch to: Outline

Track this topic ·Email this topic · Print this topic · Subscribe to this forum

Custom Search


RSSSearch   Top   Lo-Fi    7th December 2019 - 01:08 AM