Logo not appearing

HTML & CSS
21

Hi Paul

a) many thanks for the code for the span. It works perfectly. I only wish I understood

b) I would be very happy to get into sorting out, once and for all, my meandering sidebars. The problem(s) is that I do not really have the time right now and could only apply a patch.

This particular page will be a template for a few dozen pages I want to convert and run away from pop-ups. I have more or less decided to get rid of the sidebar on the right and therefore only need to get the left one to go hand in hand with the central part.

if I could do this in one day, with some friendly help…but wouls prefer to keep to css/html, and thought that the True Layout Method would be the simplest.

22

Ahh sorry I copied the rule from Firebug which prints out all the values of the shorthand. You only need to say 'background:#fff :smile:

23

Hi

many thanks. I now have a reasonable page that only needs to sort out the sidebars… from Ryan’s comments, yesterday, and from what I have read, the first thing is to “wrap the sidebars and the main content divs in a container”.

Now, does that mean that in the css or the html I have to place them one after another?
In the html they are, respectively in lines 107, 266, and 302.

I guess if I though for a minute, or five, I might work it out, but at this time of the evening the brain is slow,

What do I need to do first?

Having said the above the whole page does start and finish with a div “container”. is that any good?

24

Pseudo code but a content/sidebar div should be like this

div container
  div content
  /div content

  div sidebar
  /div sidebar
/div container

Obviously the order of sidebar/content (which one is first/second) depends on your design)

It’s not terrible but usually the container can be a good division from the footer. It’s not “wrong” for you to do it your way.

25

Hi

I’m getting cold feet already! I cannot see what I can do with my current code to try and patch the minimum necessary for the “True Layout Method”

Do you mean, for starters, that I could finish my current container to just above the footer?

You mean move all the content to the top (after the header) and the sidebars after that, and then create a div to wrap the lot?

26

What do the lines with forward slash mean?

27

hi

I’ve been cleaning up the css and rearranging the divs so that they make some sense in terms of what and where the sidebars and main, central content is.

I will also be renaming more logically the divs in the sidebars.

Thanks

UPDATE

I moved the # box to the top before the sidebbars in anticipation of applying the equal height code, but something has gone wrong with the sidebars. I’ve left for you to see, as I am not sure why this is so.

Thank you

28

Hi,

The problem is that floated content must come first before any static content otherwise it won’t stay alongside the content. That means that #left must be above the middle content div. This effectively means that you can’t re-organize the html when using floats unless you also use some negative margin-trickery.

If you can explain what you are doing here I can show you a wireframe of how to do this?

I assume you want the centre content first in the html so that you can drop the left sidebar underneath the content at smaller screen sizes. If you are just hiding the left sidebar at smaller screen sizes then it may be best just to keep the logical source order of left column and then main column.

What are you doing with the right column which only seems to be very narrow now? Is it just a background colour as there are better ways to do this?

29

Hi Paul

In my exchanges with Ryan yesterday I go the impression that th first step to introduce code to get the same height throughout was to wrap the three columns and the order appeared to me to be #box #left #right.

before I attempted this I backed up, so I will rvert to the previous version, which is finished and ready to publish, except for minor details, and the BIG one of sorting out the height of the columns.

I cannot at this stage make any drastic redesign, so if you can help me introduce the minimum needed, I would be grateful.

I saw somthing interesting that might be useful and I would like to try if you think is advisable

As for the right column, it will have no content and be 50px wide, like the index page http://pintotours.net

Thank you for your help and support: much appreciated!

30

That seems to be a rip off from my article of 8 years ago which uses the same techniques albeit without the pseudo elements which weren’t available in the browsers that the demo was originally coded for. I have documented all these techniques since 2003 and there is nothing new about any of them.

It’s a good method but awkward in fluid widths and suffers from a pixel jog in some browsers. If all you are supporting is IE8 plus then I recommend the display:table table-cell method instead.

Can you point me to the design that you need help with and point out the requirements?

Or do you want a wireframe example of the approach I would take?

31

Hi Paul

Many thanks. I’m afraid half you post is Chinese to me… too adanced stuff!
However, I read often that tables are anathema to SEO…

Anyway, right now all I need is to sort out the sidebars to have same length as content, with minimum changes to the current code.

The page is back in the earlier “complete” version: http://pintotours.net/Work/Sights/Test.html

32

No,no,no… he’s not asking you to create a HTML table… that’s anathema to SEO…

He’s asking you to use a CSS property (display) with a value of table to the container and then apply the same property (display) but with value table-cell to the children.

Example:

HTML
<ul>
    <li>one</li>
    <li>two</li>
</ul>

CSS
ul{display:table;}
li{display: table-cell}
33

Your #left and #right need a parent, as said before, and that parent needs display:table. Then unfloat #left and #right and give display:table-cell.

Then remove the heights on both columns. If Paul sees that STILL there then I imagine his reaction will be like…

34

Hi Ryan (and molona)

You know him better than I do…

Back to business:

How do I do that?

.parent {
display:table;
}

Somthing like that? And get #left and #right inside it? That’s all?

Won’t the current version go all over the place? Well, I trust you…

UPDATE

before I touch the html, I need confirmation that I can move all the #right code to immediately after #left. I say this beacuse earlier on I did something similar and the page did not work.

Of course, Paul pointed out that was because of the floats, and now I am removing the floats…(thinking aloud)

35

Hi,

I know you won’t use this but here’s roughly how you should be doing it.

<!doctype html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<link href='http://fonts.googleapis.com/css?family=Roboto:300,400,500,600%7CRoboto+Slab:400,600' rel='stylesheet' type='text/css'>
<title>Santo Domingo Sightseeing</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Travel information:Dominican Republic, Santo Domingo, Punta Cana, Puerto Plata, La Romana, flights, hotels, rent-a-car, insurance.">
<meta name="keywords" content="Dominican Republic, Santo Domingo, Punta Cana, Puerto Plata, La Romana, flights, holidays, hotels, rent-a-car, travel insurance, beach, resorts, beach resorts, all-inclusive">
<!--<link rel="stylesheet" href="Test.css">-->
<script src="/Pinto/scripts/clock.js"></script>
<link rel="icon" href="/favicon.ico">
<style type="text/css" media="all">
</style>
</head>

<body>
<div id="container">
        <div id="header">
                <div id="section1">
                        <div id="clock">
                                <div id="position">
                                        <div id="Santo-Domingo" class="cityTimeDate"></div>
                                </div>
                        </div>
                        <!-- close clock -->
                        
                        <div id="title">
                                <h1 id="att0">Santo Domingo</h1>
                                <p>Dominican Republic</p>
                        </div>
                        <!-- close title -->
                        
                        <div id="logo">
                                <div class="img-container"><img title="Logo" alt="Logo" src="/Pinto/images/tinyLogo.png" width="80" height="55"></div>
                        </div>
                        <!-- close logo --> 
                        
                </div>
                <!-- close section1 --> 
                
        </div>
        <!-- close header -->
        
        <ul id="nav">
                <li><a href="/">Home</a></li>
                <li><a href="Punta.php">Punta Cana</a></li>
                <li><a href="/Europe/Spain/Barcelona.html">Barcelona</a></li>
                <li><a href="/Asia/Indonesia/bali.php">Bali</a></li>
                <li><a href="/Asia/Indonesia/indonesia.php">Jakarta</a></li>
                <li><a href="/Oceania/Australia/Sydney.html">Sydney</a></li>
                <li id="noborder"><a href="/Asia/India/India.php">India</a></li>
        </ul>
        
        <!-- close nav -->
        
        <div id="horizontal">
                <ul class="small-nav">
                        <li><a href="#att0">Zona Colonial</a></li>
                        <li><a href="#att1">Malecon</a></li>
                        <li class="noborder"><a href="#att2">Columbus Lighthouse</a></li>
                </ul>
                
                <!-- close nav0 -->
                
                <ul  class="small-nav">
                        <li><a href="#att3">Mirador Park</a></li>
                        <li><a href="#att4">Three Eyes</a></li>
                        <li class="noborder"><a href="/">MAIN PAGE</a></li>
                </ul>
                
                <!-- close nav1 --> 
                
        </div>
        <!-- close horizontal -->
        
        <div class="clear"></div>
        <div class="column-wrapper">
                <div id="left">
                        <div class="panel panelL1">
                                <div class="ad">
                                        <div class="img-container"><img title="Logo" alt="Logo" src="/Pinto/images/whitelogo125b.jpg" style="margin-left:-20px" width="125" height="85"></div>
                                </div>
                                <!-- close ad --> 
                        </div>
                        <!-- close panel2c -->
                        
                        <div class="panel panelL2">
                                <h5>Major Attractions:</h5>
                                <div class="dest">
                                        <ul>
                                                <li><a href="#att1">MALECON</a></li>
                                                <li><a href="#att2">COLUMBUS LIGHTHOUSE</a></li>
                                                <li><a href="#att3">PARQUE MIRADOR SUR</a></li>
                                                <li><a href="#att4">LOS TRES OJOS</a></li>
                                        </ul>
                                </div>
                                <!--close dest--> 
                                
                        </div>
                        <!--close panelL2-->
                        
                        <div class="panel panelL3">
                                <h5>See other destinations:</h5>
                                <div class="dest">
                                        <ul>
                                                <li><a href="/Asia/Indonesia/indonesia.php">JAKARTA</a></li>
                                                <li><a href="/Asia/Indonesia/bali.php">BALI</a></li>
                                                <li><a href="/Europe/Spain/Barcelona.html">BARCELONA</a></li>
                                                <li><a href="/Americas/DomRepublic/StoDomingo.php">SANTO DOMINGO</a></li>
                                                <li><a href="/Americas/DomRepublic/Punta.php">PUNTA CANA</a></li>
                                                <li><a href="/Oceania/Australia/Sydney.html">SYDNEY</a></li>
                                                <li><a href="/Asia/India/India.php">INDIA</a></li>
                                        </ul>
                                        <ul>
                                                <li><a href="/">HOME PAGE</a></li>
                                        </ul>
                                </div>
                                <!--close destx--> 
                                
                        </div>
                        <!-- close panelL3 -->
                        
                        <div class="panel panelL4">
                                <div class="try">
                                        <p> Hotel chains that guarantee the lowest Internet rates.</p>
                                </div>
                                <h5>You book with them,<br>
                                        not with us.</h5>
                        </div>
                        <!-- close panelL4 -->
                        <div class="panel panelL4">
                                <div class="ad2">
                                        <P style="font-size: 12pt; font-family: Tahoma; color: black">Click the logos below to enter the hotels' own websites.</p>
                                        <a href="http://www.tkqlhce.com/click-7089264-10577445" target="_blank" onmouseover="window.status='http://www.Marriott.com; http://www.gomarriottvacations.com; http://www.ShopMarriott.com';return true;" onmouseout="window.status=' ';return true;"> <img src="http://www.lduhtrp.net/image-7089264-10577445" width="120" height="60" alt="Courtyard by Marriott - Make the most of your stay!" ></a> <a href="http://tc.tradetracker.net/?c=5516&amp;m=12&amp;a=143420&amp;u=https%3A%2F%2Fwww.occidentalhotels.com%2Fcity-hotel%2Foccidental-el-embajador" target="_blank" rel="nofollow"> <img src="http://ti.tradetracker.net/?c=5516&amp;m=191741&amp;a=143420&amp;r=&amp;t=html" width="120" height="60" alt="Occidental hotels, Santo Domingo" /></a> </div>
                                <!-- close ad2 --> 
                        </div>
                        <!-- close panelL4 -->
                        
                        <div class="panel panelL5">
                                <div class="dest">
                                        <ul>
                                                <li><a href="#att9">ZONA COLONIAL</a></li>
                                                <li><a href="#att2">COLUMBUS LIGHTHOUSE</a></li>
                                                <li><a href="#att3">PARQUE MIRADOR SUR</a></li>
                                                <li><a href="#att4">LOS TRES OJOS</a></li>
                                                <li><a href="#att0">BACK TO TOP</a></li>
                                        </ul>
                                </div>
                                <!--close dest1--> 
                                
                        </div>
                        <!--close panelL5-->
                        
                        <div id="secretleft" class="panel">
                                <div class="normal1"> Don't get caught!
                                        <p><span><a href="/">Travel Secrets</a></span></p>
                                        unravelled</div>
                        </div>
                        <!-- close secretleft -->
                        
                        <div class="panelL6">
                                <div class="dest dest2">
                                        <ul>
                                                <li><a href="#att9">ZONA COLONIAL</a></li>
                                                <li><a href="#att1">MALECON</a></li>
                                                <li><a href="#att3">PARQUE MIRADOR SUR</a></li>
                                                <li><a href="#att4">LOS TRES OJOS</a></li>
                                                <li><a href="#att0">BACK TO TOP</a></li>
                                        </ul>
                                </div>
                                <!--close dest2-->
                                
                                <div class="dest dest3">
                                        <ul>
                                                <li><a href="#att9">ZONA COLONIAL</a></li>
                                                <li><a href="#att1">MALECON</a></li>
                                                <li><a href="#att2">COLUMBUS LIGHTHOUSE</a></li>
                                                <li><a href="#att4">LOS TRES OJOS</a></li>
                                                <li><a href="#att0">BACK TO TOP</a></li>
                                        </ul>
                                </div>
                                <!--close dest3-->
                                
                                <div class="dest dest4">
                                        <ul>
                                                <li><a href="#att0">BACK TO TOP</a></li>
                                                <li><a href="#att9">ZONA COLONIAL</a></li>
                                                <li><a href="#att1">MALECON</a></li>
                                                <li><a href="#att2">COLUMBUS LIGHTHOUSE</a></li>
                                                <li><a href="#att3">PARQUE MIRADOR SUR</a></li>
                                        </ul>
                                </div>
                                <!--close dest4--> 
                                
                        </div>
                        <!-- close panelL6 --> 
                        
                </div>
                <!-- close left -->
                
                <div id="box">
                        <h2><b>Sightseeing in Santo Domingo</b></h2>
                        <p>
                        <h4 id="att9">Zona Colonial</h4>
                        <p>The Colonial Zone offers a lot to see.</p>
                        <p>It was near this place, on the eastern side of the Ozama River that, in 1496, Bartholomew Columbus, the brother of Christopher Columbus, founded what became the first settlement in the Americas to have been inhabited to this day. In 1502, the settlement was destroyed by a hurricane and Nichol&#225;s de Ovando, Bartholomew’s successor, rebuilt Santo Domingo on its present site, on the other bank of the Ozama River. Its layout became a blueprint for many New World cities.</p>
                        <div class="ad">
                                <div class="img-container"><img src="/Americas/DomRepublic/images/ZonaColon2.jpg" title="Zona Colonial" alt="The Zone Colonial of Santo Domingo"></div>
                        </div>
                        <div class="credit"> <a href="richie2.html" target="_blank" >Photography by Richie Diesterheft</a> </div>
                        <p> One of the oldest structures in the Colonial Zone is Casa del Cord&#243;n. Built in 1502, it was the home of Diego Col&#243;n, the son of Columbus and the viceroy of the  Spanish colony. He lived there until the completion of the Alc&#225;zar  (1510-1514), which became, then,  the new viceroy’s residence. The Alc&#225;zar was thoroughly restored in 1957 and, nowadays, displays a collection of items owned by the Governors overseeing the colony in the period from 16th to the 19th centuries. Of particular interest is the 16th century furnishings and other belongings of Diego Col&#243;n and his wife Maria de Toledo.</p>
                        <p> The street where Do&#241;a Maria used to promenade with her court ladies received the name Calle de las Damas. On this street stands the Ozama Fort, another old structure of the Colonial Area. The fort is claimed to be the oldest military fortification in the Americas. Inside, the 18,5 meter tall Torre del Homenaje (the Homage Tower) was named to honor the conquest of Hispaniola – the name of the island shared between the Dominican Republic and Haiti.</p>
                        <p>The fort and the tower have a dual symbolic meaning. First, because it was from this fort that numerous expeditions of conquest began: Hern&#225;n Cort&#233;s, to M&#233;xico; Diego Vel&#225;squez, to Cuba; Francisco Pizarro, to Peru; Alonso de Hojeda, to Venezuela; Vasco N&#250;&#241;ez de Balboa, to Panama; and Ponce de Le&#243;n, to Puerto Rico. And second, because the Homage Tower displays the flags of those nations that attempted to dominate this country: Spain, England, France, (Greater) Colombia, Haiti and the USA. From the top of the tower opens a spectacular view towards the Caribbean coast, and the entrance to the Ozama River. </p>
                        <p>The major attraction in the Colonial Zone is the, predominantly Gothic Cathedral of Santa María la Menor. Built of solid limestone in the period 1514-1544, it is the first cathedral in the Americas. The Dominicans claim that the relics of Columbus were kept here until recently, when they were transferred, in 1992, to a place specially designed for the purpose in the Faro a Col&#243;n - the Columbus Lighthouse (see below).</p>
                        <div class="ad">
                                <div class="img-container"><img src="/Americas/DomRepublic/images/ParqueColon2.jpg" title="Parque Colon" alt="Parque Colon in Santo Domingo"></div>
                        </div>
                        <div class="credit"> <a href="richie.html" target="_blank" >Photography by Richie Diesterheft</a> </div>
                        <div class="back"> <a href="#att9">BACK TO TOP</a> </div>
                        <h4 id="att1">Malec&#243;n</h4>
                        <div class="ad">
                                <div class="img-container"><img src="/Americas/DomRepublic/images/malecon.jpg" title="The >Malec&#243;n in Santo Domingo" alt="The Malec&#243;n in Santo Domingo"></div>
                        </div>
                        <div class="credit"> <a href="bunker.html"  target="_blank" >Photography by bunkerglosiempre</a> </div>
                        <p>The Malec&#243;n (the word means "a sea wall") stretches along the George Washington Avenue running the length of the  Santo Domingo’s oceanfront, from the port near the Colonial Zone. The Malecon is a popular place for leisurely walks, particularly on Sundays when the traffic is diverted from this area to give the space to pedestrians.
                                Along this waterfront boulevard there are several large hotel and casino complexes, and plenty of small restaurants, clubs and cafes.</p>
                        <p>The Malec&#243;n is also a favourite place for romantic rides in an old-style horse carriage. Many large events in the city life happen on the Malec&#243;n, throughout the year,  and  include the Carnival in February-March, or the Merengue Festival in  the last week of July, and the first week of August (but check the dates, as they may change). The Merengue is a lively Caribbean dance with its origins in the island of Hispaniola. It is the equivalent of the Cuban rumba or the Brazilian samba, with its roots in the cultural heritage of the African slave population that came to the island during the colonization period.</p>
                        <div class="back"> <a href="#att9">BACK TO TOP</a> </div>
                        <h4 id="att2">Columbus Lighthouse</h4>
                        <div class="ad">
                                <div class="img-container"><img src="/Americas/DomRepublic/images/faro.jpg" title="Columbus Lighthouse, Santo Domingo" alt="Columbus Lighthouse, Santo Domingo"></div>
                        </div>
                        <div class="credit"> <a href="daniel.html"  target="_blank" >Photography by Daniel Lobo</a> </div>
                        <p>The Columbus Lighthouse (Faro a Col&#243;n) is a huge monument to Christopher Columbus, built in 1992, to commemorate the 500th anniversary of the island’s discovery. The remains of the great explorer were removed, on that occasion, from the Santa Maria Cathedral and placed in the lighthouse. This immense memorial is 210 metres long, 34 metres wide, and 46 metres high. There are 157 beams of light radiating skywards from this monumental lighthouse. They can be seen at great distances. It is clamed that often, even reaching the island of Puerto Rico, over 300 Km away. </p>
                        <p>There is a museum here with displays from different countries, which were influenced by Columbus’s discoveries, European colonization, and evangelization of the Americas. The museum is closed on Mondays.</p>
                        <div class="back"> <a href="#att9">BACK TO TOP</a> </div>
                        <h4 id="att3">Parque Mirador Sur</h4>
                        <p>The Parque Mirador Sur is in the western part of the city. This beautiful park is near the Avenida Anacaona, the place where most of the embassies are. The park is popular spot for daily walks, jogging, roller-skating and cycling. The park has stone caverns that in pre-Columbian days were inhabited by Ta&#237;nos, the local Indian people. One of those caverns was currently transformed into the popular discotheque &ldquo;La Guacara Ta&#237;na&ldquo;. The place is worth a visit to appreciate its exuberant interior and for the shows and events that are staged there.</p>
                        <div class="back"> <a href="#att9">BACK TO TOP</a> </div>
                        <h4 id="att4">Los Tres Ojos</h4>
                        <div class="ad">
                                <div class="img-container"><img src="/Americas/DomRepublic/images/3ojos.jpg" title="The Three Eyes caves, Santo Domingo" alt="The Three Eyes caves, Santo Domingo"></div>
                        </div>
                        <div class="credit"> <a href="moises.html" target="_blank" >Photography by Moises Terrero</a> </div>
                        <p>In a different part of town, about ten kilometres from the city centre, the Parque Mirador Este is known for its natural lime stone caverns filled with water. The lagoons, poetically called "ojos" make up the “Tres Ojos” (three eyes). These once subterranean lagoons collapsed to form and expose small open-air lakes. They  contain water of varied and vivid colours, which drain into the lakes from underground currents. Usually, the visit starts with Laguna Azul that has sky blue water; the next lake to visit is Lago del Frigorifico (Fridge Lake). The name is due to its waters having a constant temperature of +2&#176; C.  For an extra fee, the lakes and lagoons in the park can be crossed by boat. The third lake leads visitors to a beautiful stalactite grotto with views over the lush tropical forest. The place was recently used as the setting for Tarzan movies.</p>
                        <div class="back"> <a href="#att9">BACK TO TOP</a> </div>
                        <div class="ad" id="popup-test"> <a href="StoDomingo.php" target="_blank">
                                <h3>Please, visit our Dominican Republic pages</h3>
                                </a> <a href="StoDomingo.php"><img src="/Pinto/images/whitelogo75.jpg" title="Home" alt="Home button" style="border:1px solid blue"/></a> </div>
                        <!-- close ad --> 
                        
                </div>
                <!-- close box --> 
                
        </div>
        <!-- end columnwrapper -->
        
        <div class="clear"></div>
        <div id="footer"> <a class="popup" data-dimensions="500,500" href="./warningStoDom.html">
                <h6>Disclaimer</h6>
                </a>
                <p> * The price guarantees are the sole responsibility of the hotels, airlines, and other providers, as per their advertisements.</p>
                <p> &#169; 2013-2015 Pinto Tours. All Rights Reserved</p>
                <div id="footer2"> <a href="https://plus.google.com/u/0/102641343871120021266/?rel=publisher"> - Find us on Google+</a> <a href="https://plus.google.com/102641343871120021266?rel=author">by Camilo de Barros</a> <span></span> </div>
                <!-- close footer2 --> 
                
        </div>
        <!-- close footer --> 
        
</div>
<!-- close container -->

</body>
</html>

I’ll post the styles in another post because it goes over the character limit of this post so just grab the styles and then insert then in style tags of the above html so you can test. Then save it and then run it in your browser.

You will see how the columns all match without any heights and the code is about 50% lighter than your code. I have made some design tweaks to keep things simpler (such as not letting the middle column go flush with the top and bottom) but in my opinion that makes it look neater although with a few tweaks we could probably achieve your design.

There is no need to continually repeat styles for elements that are the same. e.g. Your panels in the left side all had ids and you applied the same 10 or so rules to every one of them and the only difference in some of them was a different margin. All you needed was one class with all the common styles and then just add an extra class when you need to modify the elements. That save over 90% of the code you used for those elements.

I also tweaked the main nav so it doesn’t disappear and scales better across the range.

This could still be tidied up more but just wanted to show what could be done in 30 minutes or so.

36

Here are the styles:

<style>
body {
    padding: 0;
    border: 0;
    margin: 10px;
    background: #E1E19D;
}
h2 {
    font-size:20px;
    font-weight:500;
    font-family: roboto slab, roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h3 {
    color:black;
}
h3 a {
    text-decoration:none;
}
h4 {
    color:brown;
    font-size:18px;
}
a img {
    border:0;
}
.header, footer, left, right {
    box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.5);
}
#header {
    width:100%;
    max-width:1000px;
    height:140px;
    background-color:#910000;
    overflow: hidden;
    margin-top:5px;
    border-radius:0 0 20px 20px;
}
#header #section1 {
    height:140px;
    background-color:#910000;
    border-radius:0 0 20px 20px;
}
#header #section1 #clock {
    float:left;
    width: 170px;
    height:140px;
    background-color:#910000;
    padding-top:0;
    margin-left:60px;
}
#header #section1 #clock #position {
    float:left;
    text-align:center;
    margin-top:10px;
    margin-left:20px;
    color:white;
    font-family: roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.cityTimeDate span {
    display:block;
}
#city {
    font-size:16px;
    color:white;
}
#time {
    font-size:36px;
    color:#CDCD5C;
}
#Santo-Domingo #date {
    font-size:15px;
    color:white;
}
#header #section1 #title {
    height:140px;
    background-color:#910000;
    line-height:60px;
    padding-top:0;
    padding-left:335px;
    margin:0 50px 0 80px;
}
#title h1 {
    font-size:30px;
    font-weight:bold;
    color:#E1E19D;
    font-family: roboto slab, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#header #section1 #title p {
    color:#FAEFEF;
    padding-top:0;
    padding-left:30px;
    font-size:20px;
    line-height:10px;
}
#logo {
    position:absolute;
    left:-1000px;
    top:40px
}
/* begin #nav */
#nav {
    margin:10px 0 0 0;
    padding:0;
    list-style:none;
    background:#cd945c;
    display:table;
    width:100%;
    border-collapse:collapse;
}
#nav li {
    display:table-cell;
    vertical-align:middle;
    border-right:2px solid #fff;
    text-align:center;
}
#nav li:last-child {
    border:none
}
#nav a {
    display:block;
    line-height:1.4;
    padding:7px 0;
    text-decoration:none;
    font-family: roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:21px;
    color:#fff;
}
#nav a:hover {
    color:#00f;
}
/* end #nav */


.small-nav {
    margin:2px 0 0;
    background:#cd945c;
    padding:0;
    list-style-type:none;
}
.small-nav li {
    border-right:2px solid #fff;
    display:inline-block;
}
.small-nav li:last-child {
    border-right:0
}
.small-nav li a {
    display:inline;
    line-height:20px;
    padding:0 4px 0;
    text-decoration:none;
    font-family: roboto, Helvetica, sans-serif;
    font-size:14px;
    color:#fff;
}
.small-nav a:hover {
    color:#00f;
}
#horizontal {
    display:none;
    text-align:center;
}
#container {
    max-width: 1000px;
    width:100%;
    margin-left:auto;
    margin-right:auto;
}
#box {
    display:table-cell;
    vertical-align:top;
    border:solid 5px #CCCC66;
    background:white;
    padding: 0 20px 70px 20px;
    border-radius:0 20px 20px 0;
    font-family: roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#box p {
    font-size:17px;
    text-align:justify;
}
.img-container {
    margin:0 auto 20px;
    border-radius:0;
    border:none;
    padding-top:0;
    width:100%;/* adjust to suit*/
}
.img-container img {
    position:static;
    width:auto;
    height:auto;
    max-width:100%;
    border:2px brown solid;
}
div .ad {
    padding:20px 0 0 8px;
    text-align: center;
}
div .ad2 {
    padding:20px 0 0 8px;
    text-align: center;
}
div .ad2 img {
    padding-bottom:50px;
}
div .credit {
    font-family: roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-align:center;
    font-size:7px;
    color:black;
    margin-top:-10px;
    margin-bottom:30px;
}
div .credit a {
    color:black;
}
.back {
    display:none;
    font-size:12px;
}
.back a {
    color:blue;
}
.column-wrapper {
    display:table;
    width:100%;
    border-spacing:10px;
    border-radius:20px;
    background:#910000;
    margin:15px auto;
    table-layout:fixed;
    padding:0 50px 0 0;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}
#left {
    display:table-cell;
    vertical-align:top;
    width:165px;
    padding:0px;
    background-color: #ffffe7;
    border: 1px solid #cccccc;
    border-radius:20px 0 0 20px;
}
.panel {
    position:relative;
    border: solid 1px #CCCCCC;
    background: #ffffe7;
    margin:-1px -1px 15px;
    text-align: center;
    padding:5px;
    box-shadow:inset 0 0 5px 0 rgba(0, 0, 0, 0.2);
}
.panel:after {
    content:" ";
    height:15px;
    position:absolute;
    bottom:-16px;
    left:-1px;
    right:-1px;
    background:#910000;
}
.panelL1 {
    height:130px;
    border-radius:20px 0 0 0
}
.panel img {
    border:none;
}
.panelL4 {
    padding:5px 5px 40px 5px;
}
.try {
    border:1px solid brown;
    background-color:#ffffd8;
    font-family: Roboto, Helvetica, sans-serif;
    font-size:20px;
    font-weight:normal;
    color:black;
    margin:30px 10px;
    padding:0 10px 0 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-left-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    border-bottom-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    border-top-left-radius: 10px;
    -moz-border-radius-topright: 10px;
    border-top-right-radius: 10px;
}
#secretleft {
    padding: 5px 5px 27px 5px;
    height:248px;
}
.normal1 {
    border:1px solid brown;
    background-color:#ffffd8;
    margin-top:30px;
    font-family: Times New Roman, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:20px;
    font-weight:normal;
    color:black;
    padding-top:10px;
    padding-bottom:10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-left-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    border-bottom-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    border-top-left-radius: 10px;
    -moz-border-radius-topright: 10px;
    border-top-right-radius: 10px;
}
.normal1 span {
    background:#F4FAFF;
    border: 1px solid brown;
    color: brown;
    display: block;
    font-size: 30px;
    font-weight: bold;
    height: 80px;
    margin: auto;
    width: 120px;
    border-radius:10px;
}
.normal1 a {
    color:blue;
    text-decoration:none;
}
div .panelL6 {
}
h5 {
    font-family: Roboto, Helvetica, sans-serif;
    font-weight:normal;
    font-size:20px;
    color:black;
    padding-top:0;
    padding-left:5px;
}
.dest {
    border:1px solid brown;
    background-color:#ffffd8;
    margin:10px 5px;
    overflow:hidden;
    text-align: left;
    padding:15px 5px 5px 2px;
    border-radius:10px;
}
.dest2 {
    margin-bottom:472px
}
.dest3 {
    margin-bottom:575px
}
.dest4 {
    margin-bottom:75px
}
.dest ul {
    font-family: roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:12px;
    list-style: none;
    font-weight:normal;
    margin:0;
    padding:0 5px;
    list-style:none;
    background:#ffffd8;
    border:none;
}
.dest ul li {
    line-height:22px;
    padding:5px 5px 5px 0;
}
.dest ul a {
    color:brown;
}
.clear {
    clear: both;
}
#footer {
    max-width:1000px;
    width:100%;
    height:auto;
    background-color:#CD853F;
    margin-right:auto;
    margin-left:auto;
    margin-top:0;
    padding-right:10px;
    margin-bottom:10px;
    -moz-border-radius-topleft:20px;
    border-top-left-radius:20px;
    -moz-border-radius-topright: 20px;
    border-top-right-radius: 20px;
    text-align:center;
    font-size:80%;
    line-height:2;
}
#footer a {
    text-decoration: none;
    color:black;
}
#footer h6 {
    font-size:90%;
    padding:0;
    margin:0;
}
#footer2 {
    position:relative;
    margin:0;
}
#footer2 a {
    text-decoration: none;
    color:DimGray;
}
#footer2 span {
    position:absolute;
    width:100%;
    height:28px;
    top:0;
    left:0;
    background-color:rgb(0,0,0);
    filter:alpha(opacity=0);
    opacity:0;
}
 @media screen and (max-width:940px) {
#header #section1 #title {
    white-space: nowrap;
}
}
@media screen and (max-width:710px) {
#nav li {
    display:block;
    border:none;
    border-bottom:1px solid #fff
}
#header #section1 #title {
    padding-left:235px;
    white-space: nowrap;
}
#title h1 {
    font-size:20px;
}
#header #section1 #title p {
    padding-top:0;
    padding-left:0;
    font-size:20px;
    line-height:10px;
    white-space:nowrap;
    margin-left:-5px;
}
#right {
    display:none;
}
.column-wrapper {
    padding-right:0;
}
}
 @media screen and (max-width:550px) {
#title h1 {
    display:none;
}
#header #section1 #title p {
    display:none;
    white-space: nowrap;
}
#clock #position {
    padding-top:13px;
}
}
 @media screen and (max-width:500px) {
#left {
    display:none;
}
#horizontal {
    display:block;
}
#logo {
    position:absolute;
    left:auto;
    right:50px;
    top:50px;
}
.back {
    display:table !important;
}
#box {
    border-radius:20px
}
}
 @media screen and (max-width:430px) {
#header #section1 #clock {
    margin-left:12px;
}
</style>
37

Hi Paul

why should I not use it? The only but is that I try (often without success…) to understand the code and if I get the page all in one go, I end up losing control (this is a hobby , despite all the adverts).

I take it that at the end of the day the code you sent will display a page exactly as my current one, but with the sidebars sorted out. Is that so?

I was in the process of complying with Ryan’s instructions and must have done something wrong. Could we try to get that worked out first?

many thanks for all your trouble Paul

UPDATE

I’ve just put it together as pintotours.net/Work/Sights/paul.html
It looks great but I haven’t studied it yet. It looks as if you got rid of the columns altogether and just get rid of content as you go along.
I think I will use it, although to be ohonest I would like to get MY PAGE sorted out a bit at a time. It’s over 18 months now and I am learning a bit every day.

I don’t know if Ryan is online. I would like to see where I messsed up his code

Thanks

38

That was quick :smile:

Yes, that’s what I wanted to show you and is much like your original although I did simplify the exact design a little to make it easier as mentioned before.

It uses display:table for the column-holder and then each column is set to display:table-cell. This gives equal columns straight away.

To get the red gaps between your panels I just used :after to make a red background to provide the illusion that each panel was a separate block. In that way the last panel will always stretch to the bottom because it is the actual cell.

The panels are all done with a single class but I left two classes in place on the elements so that you can tweak each individually if needed. Most just need different vertical margins.

The navigation also uses display:table so that it can stretch and squeeze but once it gets too small I change it to a vertical nav for small tablets and mobile.

There is still a lot of tidying up that you can do with the stylesheet.

You are setting the font family on loads of elements when you could just set it on the parent (or the body if you want all fonts to be the same) (that’s why its called cascading style sheets :smile: ).

I would remove the unclosed p tag here:

<p>
 <h4 id="att9">Zona Colonial</h4>

Although most browsers will cope with an unclosed tag IE used to apply any p styles to all the content that follows as it assumed it was nested. If you wanted to make space then just add atop margin to the h4.

Just play around with it and get a feel for how things are working without the need to match heights.

I’m not that keen on those last three spaced out panels in the left column but I guess you were just trying to keep some navigation visible as the user scrolled down. It may have been enough to just have had one at the bottom. (or perhaps a sticky side nav would have been an idea bur are a little awkward to code).

39

Hi Paul

I’ve been studying your css and got stuck right at the top with the navbar, whuch is Chinese to me…

You got the side bar to narrow as you narrow the screen. i spent ages trying to do that and failed!. However, I cannot see how you did it as I never came across most of the code before. On the other hand, I don’t want the navbar to go vertical, and have been deleting bits here and there and nothing seems to work as I want.

Yes! Athough at the moment the panels are not very attractive that’s exactly what I want: further navigation as the user scrrolls down. But I need them at exactly the height of the new sight title.It also helps to fill empty space. I can work on that.

The beauty of your page is how it finishes at the bottom. Is it not possible tio adjust my code as per Ryan’s earlier instructions which seem to go in the direction of the basic code of your page?

Your page is a million times better than my last attempt, but… it is “my baby”. Ugly I know, but beautiful in the father’s eyes!

In the end, I will probably give up on mine and take up yours, but first I would need months to study and try to understand it. Right now I would like to see how I can get the navbar to behave like yours but without going vertical. But, more urgent and mmuch more important is to see why the page went beserk after applying what I thought were Ryan’s instructions, which I obviously messed up.

help!

40

Hi Paul

I’ve made a few adjustments and the page is great! The only problem is with the left column: the white area sticks ou a bit at the bottom. This may be due to my changing margins to try and achieve a 10px of the dark red at the top. I can’t find where I did it to undo… Worse as the page narrows that white part sticks out more and more. If you could tell me how to correct this, i think I will sleep a happy man, tonight!

Manny thanks and sorry for the hiccups.