Databases
StackOverflow2013
Postsdbo
POStandard way to layout images with HTML/CSS
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POStandard way to layout images with HTML/CSS
    primarykey
    data
    text
    <p>I'm beginning to learn HTML and CSS, and since our lead developer is busy finishing up our project, I was asked to code the landing page.</p> <p>I read up on some tutorials and beginning books, so i have a general grasp of things. But I'm curious as to how I use HTML and css to layout images efficiently. </p> <p>When i first made the site, I used relative and absolute positioning to layout all the images. that was not good....</p> <p>This time i decided to use margins/padding to organize it, but I still feel like there is a much better to lay all this out.</p> <p>Basically i just want to be able to code the website, where if I add an image or move around images, the original pieces of the website don't end up going all over the place.</p> <p>This is a rough image of what our landing page is supposed to look like. <img src="https://i.stack.imgur.com/meEQ8.png" alt="enter image description here"></p> <p>and here is my code: HTML:</p> <pre><code>&lt;div id="container"&gt; &lt;img src="images/iphone.png" alt="iPhone" id="iphone" /&gt; &lt;div id="imagesBlock"&gt; &lt;img src="images/DashLogo.png" alt="Dash Logo" id="DashLogo" /&gt; &lt;!--&lt;div id="snappyText"&gt; &lt;p&gt;Ever think, "Where are the most mediocre places&lt;/p&gt; &lt;p&gt;to eat around here? I want me some of that."&lt;/p&gt; &lt;/div&gt; --&gt; &lt;img src="images/textQuestion.png" alt="textQuestion" id="textQuestion"&gt; &lt;img src="images/videoThumbnail.png" alt="Video Screenshot" id="videoThumbnail" /&gt; &lt;!--&lt;div id="response"&gt; &lt;p&gt;Yeah, neither do we.&lt;/p&gt; &lt;/div&gt;--&gt; &lt;img src="images/textResponse.png" alt="textResponse" id="textResponse"/&gt; &lt;a href="http://itunes.apple.com/app/memix-pro/id300136119?mt=8" title="App Store" target="_blank" &gt;&lt;img src="images/appStoreOrange.png" alt="App Store" id="appStoreOrange" /&gt;&lt;/a&gt; &lt;a href="http://twitter.com/#!/thedashapp" class="twitter" title="twitter link" target="_blank" &gt;&lt;/a&gt; &lt;a href="http://www.facebook.com/" class="facebook" title="facebook link"target="_blank" &gt;&lt;/a&gt; &lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code>body{ background:url(images/whiteBackground.png); } .container{ width:1200px; margin:0 auto; position:relative; } #iphone{ margin-left: 166px; margin-top: 88px; } /* images Block */ #imagesBlock{ position:relative; left: 550px; bottom:592px; width: 515px; } #DashLogo{ } #textQuestion{ margin-top:35px; } #videoThumbnail{ margin-top:20px; } #textQuestion{ } #textResponse{ margin-bottom: 50px; margin-left: 30px; } #appStoreOrange{ margin-top: 20px; } .twitter{ width:117px; height:112px; display: block; background: url(images/twitter.png); margin-left: 280px; margin-top:-105px; } /*.twitter:hover{ background-image: url(images/twitterBlue.png); }*/ .facebook{ width:117px; height:112px; display:block; background: url(images/facebook.png); margin-left:400px; margin-top:-112px; } /*.facebook:hover{ background-image:url(images/facebookBlue.png); }*/ </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USanc1revv
    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. VO
      singulars
      1. POStandard way to layout images with HTML/CSS
      1. This table or related slice is empty.
      1. VTUndeletion
    1. CODoes it do what you want it to?
      singulars
      1. POStandard way to layout images with HTML/CSS
      1. USMetalFrog
    2. COAre you asking for recommendations on how to improve the code? http://codereview.stackexchange.com might be a more suitable place.
      singulars
      1. POStandard way to layout images with HTML/CSS
      1. USJJJ
    3. CO@MetalFrog it does what i want it to do, but i was just wondering if there is a better/"Standard protocol" way to do it. i posted the question on codereview as well, but if you have any suggestions, let me know!
      singulars
      1. POStandard way to layout images with HTML/CSS
      1. USanc1revv
 

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