Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I don't understand your design. I see the following problems.</p> <ul> <li><p>You have a <code>div id="container"</code> but the only thing it contains is the <code>div id="fotter"</code>. All the rest of the elements are "outside" the container div.</p></li> <li><p>You have a <code>div id="logo"</code> with a style of <code>margin-top: 1%; margin-left: 25%;</code>. How will this center it?</p></li> <li><p>Your <code>div id="slider"</code> has <code>position: relative; left: 26%; top: 3em;</code> which means that it is being pushed 26% from left and 3em from top of its origional position and leaving a "gap" where it was before.</p></li> <li><p>Your <code>h1</code> has a <code>margin: left; 300px;</code>. Where exactly you want it to be?</p></li> <li><p>Underneeth the <code>h1</code> you have <code>a</code> elements which contain <code>div</code> elements? This is like a block level element inside a in-line elements. Totally wrong. These all <code>a</code> elements should be inside a <code>div</code> and than that <code>div</code> should be positioned.</p></li> <li><p>Your <code>div#footer</code> is inside the <code>div#container</code>. The <code>div#foooter</code> has a style of <code>position: absolute</code> while the <code>div#container</code> does <strong>NOT</strong> have a <code>position: relative</code>. This causes 2 things. The <code>div#container</code> collapses as it does not have any content and the <code>div#fotter</code> is positioned relative to the browser window.</p></li> <li><p>you have 3 <code>div#recent</code>. The ID has to be unique. This is not allowed. Use calsses instaed.</p></li> </ul> <p>I will give a skeloton on how to go about this.</p> <p><strong>THE HTML</strong></p> <pre><code> &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Rescued: The Movie&lt;/title&gt; &lt;link rel="stylesheet" href="my_styles.css"&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="container"&gt; &lt;div id="logo"&gt; &lt;a href="http://rescuedthemovie.com"&gt;&lt;img src="http://rescuedthemovie.com/new/images/logo.png" alt="Rescued Logo" /&gt; &lt;/a&gt; &lt;/div&gt; &lt;div id="nav"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="http://rescuedthemovie.com/home.html"&gt;home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="http://rescuedthemovie.com/synopsis.html"&gt;synpsis&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="http://rescuedthemovie.com/videos.html"&gt;videos&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="http://rescuedthemovie.com/blog.html"&gt;blog&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="http://rescuedthemovie.com/partner.html"&gt;partner&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div id="slider"&gt; &lt;img src="http://rescuedthemovie.com/images/slides/slide1.jpg" alt="Slide 1" /&gt; &lt;img src="http://rescuedthemovie.com/images/slides/slide2.jpg" alt="slide 2" /&gt; &lt;img src="http://rescuedthemovie.com/images/slides/slide3.jpg" alt="slide 3" /&gt; &lt;/div&gt; &lt;div id="blog"&gt; &lt;h1&gt;NEWS&lt;/h1&gt; &lt;div class="recent"&gt; &lt;h2&gt;The Putnam's Adoption Journey&lt;/h2&gt; &lt;a href="http://rescuedthemovie.com/blog"&gt;My husband and I thought our family was complete. We had our two children (one boy and one girl) and were completely satisfied with that. Life was comfortable. My youngest had just started Kindergarten so I found myself with more free time than I had had in nine years! I was enjoying the freedom of grocery shopping without toddlers. But then God started stirring something in our hearts...&lt;/a&gt; &lt;/div&gt; &lt;div class="recent"&gt; &lt;h2&gt;God's Divine Leading: Part 3&lt;/h2&gt; &lt;a href="http://rescuedthemovie.com/blog"&gt;I remember feeling a little surprised that she had decided on adoption. I guess I just assumed that she would opt to keep her baby. I have to admit that I did wonder for a fleeting moment if perhaps the Lord was trying to lead Jurgen and I to adopt her baby, but then reasoned that a domestic adoption might be too risky. People might also think it strange, since I was the one who encouraged her to consider adoption in the first place, rather than end her baby’s life...&lt;/a&gt; &lt;/div&gt; &lt;div class="recent"&gt; &lt;h2&gt;God's Divine Leading: Part 2&lt;/h2&gt; &lt;a href="http://rescuedthemovie.com/blog"&gt;When I awoke, I had an overwhelming desire to have a baby of our own. The dream was extraordinarily real and tangible, and I felt strongly that the Lord had given me this dream as an answer to my questions about pursuing adoption. I am not the type of person who normally bases my decisions on dreams, but this was different. It was as if the Lord Himself had dropped this desire into my heart...&lt;/a&gt; &lt;/div&gt; &lt;a id="more" href="http://rescuedthemovie.com/blog"&gt;Read More&lt;/a&gt; &lt;/div&gt; &lt;div id="footer"&gt; &lt;p&gt;&amp;copy;2011 Rescued&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><strong>THE CSS</strong></p> <pre><code>{ margin: 0; padding: 0; } img { border: 0; } a { text-decoration: none; color: #000; } body { background: url("http://rescuedthemovie.com/new/css/../images/blog_bg.jpg") no-repeat scroll center top #000; } div#container { width: 960px; margin: 20px auto; margin-bottom: 0; } div#logo { width: 850px; height: 300px; margin: 0 auto; } div#logo a { width: 100%; height: 100%; display: block; } div#nav { background: url("http://rescuedthemovie.com/new/css/../images/nav.png") no-repeat scroll 0 0 transparent; font-size: 25px; text-transform: uppercase; } div#nav ul { width: 900px; margin: 10px auto; } div#nav ul li { display: inline-block; margin: 0 40px; color: #FFF; } div#nav ul li a { color: #FFF; } div#slider { width: 500px; height: 250px; margin: 0 auto; margin-top: 77px; float: right; position: relative; /*romove this in the final design*/ } div#slider img /*romove this in the final design*/ { position: absolute; top: 0; left; 0; } div#blog { float: left; width: 450px; color: #FFF; margin-bottom: 50px; } div#blog h1 { margin: 20px 0; } div#blog a#more { float: right; color: red; } div.recent { margin: 20px 0; border: 1px solid #555; padding: 5px; } div.recent h2 { font-weight: bold; color: #777; margin-bottom: 10px; } div.recent a { color: #FFF; } div#footer { clear: both; color: #FFF; text-align: center; font: 25px; margin: 20px auto; } div#footer p { font-size: 25px; } </code></pre> <p>This offcouse is an fixed width layout. But you can easily change it to fluid or estalic. This is how it looks</p> <p><img src="https://i.stack.imgur.com/vOOec.jpg" alt="Layout"></p>
    singulars
    1. This table or related slice is empty.
    1. POFluid CSS Layout Question
      singulars
      1. PTQuestion
    1. PTAnswer
    1. This table or related slice is empty.
    1. USJawad
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. CO@jwinton: You keep changing the site. The nav is new. Anyway I added it.
      singulars
      1. PO
      1. USJawad
    2. CO@jwinton: You could atleast get back as if it worked for you or not.
      singulars
      1. PO
      1. USJawad
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload