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 5 of 5
  1. #1
    New Coder
    Join Date
    May 2017
    Posts
    62
    Thanks
    26
    Thanked 1 Time in 1 Post

    Help Needed With Picture Placement

    This page is fine on a phone and okay when not in full wide screen viewing but in full screen the text shifts right and leaves a lot of blank space. I have posted the link and picture. Any help would be appreciated.

    https://cowtownwesternswing.com/home.html

    -fullscreen-jpg

    Thanks in advance,
    Maria

  2. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    7,955
    Thanks
    36
    Thanked 1,064 Times in 1,060 Posts
    I'd use px for measurement in a query not em.

    Add this to your main CSS:
    Code:
    #content p::after {
    	content: "";
    	display: table;
    	clear:both;
    }
    That should do ya
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  3. #3
    New Coder
    Join Date
    May 2017
    Posts
    62
    Thanks
    26
    Thanked 1 Time in 1 Post
    I added that code to the CSS but that only puts more blank space on the shorter paragraphs. Is there any way to fix that?

  4. #4
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    7,955
    Thanks
    36
    Thanked 1,064 Times in 1,060 Posts
    The images and the text that goes with the image are in <p> tags they are linked. In other words more text can not be added until the image comes to an end. We can crop the image or make it smaller so we don't have so much blank space. BUT blank space is not a bad thing. It makes reading text easier. We could style with CSS Grid.

    Before doing any of those things you must first pencil out a diagram of what you want the finished page to look like. Most importantly you must decide on the max width of this page and also what you want it to look like in a mobile unit.

    An example: Bill Haley and his 4 aces picture is far longer than the text . We could do something like this [shorten snippet]:
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <base href="https://cowtownwesternswing.com/">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    <meta name="description" content="The Cowtown Society of Western Swing Music celebrates the early history and birthplace of Western Swing at the Holy Grail of Texas Dance Halls - Fort Worth�s Crystal Springs, where the pioneering Legends - Bob Wills and Milton Brown - created the Wills Fiddle Band, the Light Crust Doughboys, the Musical Brownies and the Texas Playboys from 1929 to 1936. The Cowtown Society was founded in May of 1999 to dedicate, preserve and promote Western Swing music, and to perpetuate the heritage of this genre and celebrate the annual Cowtown Society - Birthplace Of Western Swing Festival.">
    <meta name="keywords" content="Western Swing, Jazz, Blues, Cowboy, Music, Cowtown, Fort Worth, Crystal Springs, Hot-String Jazz, Fiddle, Frontier Fiddle, Bob Wills, Texas Playboys, Milton Brown, Musical Brownies, Tommy Duncan, Bob Dunn, Leon McAuliffe, Leon Rausch, Jody Nix, Jason Roberts, Billy Mata, Jake Hooker, Merle Haggard, Ray Benson, Asleep At The Wheel">
    <title>Cowtown Society of Western Swing Music - Home</title>
    
    <link rel="stylesheet" href="css/screen.css" media="screen">
    <style>
    #content p::after {
    	content: "";
    	display: table;
    	clear:both;
    }
    body{
        //max-width: 1060px;
    }
    </style>
    </head>
    <body id="home">
    
    
    
      <p><img id="home3b-img" src="images/CrystalSprings-Birthplace.png" alt="Crystal Springs" title="Crystal Springs">In the mid-1930s, Fort Worth, Texas became a hub for
      Western Swing. The Crystal Springs Dance Pavilion was at the center, and it prospered
      as a Western Swing and Country music venue until the 1960s. An estimated 2,000 people attended a New Year's Eve Dance there in 1961 to see
      Bob Wills and his Texas Playboys perform a grand reunion at the coveted birthplace of Western Swing.</p>
    
      <p style="">Western swing influenced genres known as honky-tonk, rockabilly, and early rock and roll, popularizing the following instruments in country
      music and totally changing the Nashville country sound:  use of electrically amplified steel and lead guitars, use of drums to reinforce a
      strong backbeat, expanded instrumentation, a honky tonk heavy backbeat superimposed onto a polka or waltz beat with improvisational jazz/blues
      solos.
    <p>
      <img id="home2a-img" src="images/BillHaley.png" width="200" height="198" alt="1949 Bill Haley record label" title="1949 Bill Haley record label">
    
    Western swing was one of the many sub-genres to influence rockabilly and rock and roll. Bill Haley's music from the late 1940s and early
      1950s is distinctly classified as Western Swing, and his band from 1948 to 1950 was named Bill Haley and the Four Aces of Western Swing. <span style="color:blue">(image on the right)</span></p>
    </p>
      <p>The outlaw country movement led by Willie Nelson, Waylon Jennings, Alvin Crow and the Pleasant Valley Boys and Asleep at the Wheel helped
      make Austin, Texas a major center of Western Swing beginning in the 1970s. The annual South by Southwest music festival and the Austin City
      Limits PBS television series have contributed to this success. Merle Haggard and the Strangers were also key players in this revitalization.
      Western Swing Monthly, based in Austin, is a newsletter for musicians and fans.</p>
    
      <p>In Clint Eastwood's 1982 movie Honkytonk Man, his character meets Bob Wills (played by Johnny Gimble, an original Texas Playboy), who is
      recording in a rural Texas studio with other former band members.</p>
    
      <p>In 2011 the Texas Legislature adopted a resolution designating western swing as the official "State Music of Texas".
      Western swing lives on today in Turkey, Texas during the last weekend in April for Bob Wills Day Festivities, a 4 day immersion into
      Texas Playboy history where you can tour the Bob Wills Museum, attend multiple concerts featuring the greatest Western Swing bands. Fort
      Worth will soon begin celebrating "Cowtown - Birthplace of Western Swing Festival" to be held the first Saturday of May each year beginning
      May 2, 2020.</p>
    </div>
    <div style="margin-top:150px">
     <img id="home1a-img" src="images/home7.png" alt="Turkey, Texas" title="Turkey, Texas">
    </div>
    
    
    
    </body>
    </html>
    But you need to make a sketch of what you want.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  5. #5
    New Coder
    Join Date
    May 2017
    Posts
    62
    Thanks
    26
    Thanked 1 Time in 1 Post
    I tried that but it's still not working. My friend hates blank space on websites. Turns out this problem is on several pages.


 

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
  •