-
1 Attachment(s)
[RESOLVED] Picture Layout: Better way than using
Hi,
I am trying to create the following layout but the only way I can manage to get the elements to align correctly is by using   in the code. Is there a better way accomplish this?
Layout:
http://www.vbforums.com/attachment.p...1&d=1229130499
Code:
<div class="main"><h2>Characters</h2><br /><p>The character in all versions of Silent Hill 1 remained the same they were:<br />
<img src="../images/alessagillespie.jpg" alt="Alessa Gillespie" title="Alessa Gillespie" /> <img src="../images/cherylmason.jpg" alt="Cherl Mason" /> </p><p>Name: Alessa Gillespie Name: Cheryl Mason<br /></p>
<p>Age: 14 Age: 7</p><br /><p>
Other: <br /> She has the cult god inside her,<br /> Dahlia's daughter.</p> <p>Other: Found in Silent Hill when she was a baby and adopted . She returns to Silent Hill in 1983 but goes missing.
</p><br />
<a href="../html/sh1_full.html" tabindex="0" title="Back to previous page" target="_self">Previous page</a><a href="#top" tabindex="1" title="Back to Top" target="_self">Back to Top</a><a href="#" tabindex="2" title="Silent Hill full version(page 2)" target="_self">Next Page</a></div>
Thanks,
Nightwalker
-
Re: Picture Layout: Better way than using
You could surround each picture in a DIV and set the padding, or use a table & set the left-margin rule?
-
Re: Picture Layout: Better way than using
I didn't think about using divs, that might work. Using tables though should only be done for data and numbers not for layout purposes. What I want to do is see how I can achieve the same look above without using or resorting to using tables.
-
Re: Picture Layout: Better way than using
Hi there Nightwalker83,
have a look at this semantic example...
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
margin:10px;
background-color:#111;
}
#main {
width:780px;
margin:auto;
border:3px double #f00;
background-color:#000;
overflow:auto;
}
#main h2 {
padding:12px 0 12px 30px;
color:#f00;
}
#preamble {
color:#808080;
text-align:center;
}
#gallery {
width:772px;
margin:auto ;
list-style-type:none;
}
#gallery li {
padding:12px;
float:left;
}
#gallery img {
width:360px;
border:1px solid #808080;
display:block;
}
#gallery p {
padding:12px 0 0;
color:#808080;
}
</style>
</head>
<body>
<div id="main">
<h2>Characters</h2>
<p id="preamble">
The characters in all versions of Silent Hill 1 remained the same, they were:
</p>
<ul id="gallery">
<li>
<img src="http://www.coothead.co.uk/images/apple.jpg" alt="">
<p>Name: Alessa Gillespie</p>
<p>Age: 14</p>
</li>
<li>
<img src="http://www.coothead.co.uk/images/banana.jpg" alt="">
<p>Name: Cheryl Mason</p>
<p>Age: 7</p>
</li>
</ul>
</div><!-- end #main -->
</body>
</html>
-
Re: Picture Layout: Better way than using
@ coothead
Will that setup interfere with the current setting in my css file?
Code:
@charset "utf-8";
/*Night's Hell Hole Stye Sheet IE6*/
/*************************************************************
General website properties
**************************************************************/
body {
font-family: arial;
font-size: 12pt;
padding-top: 10px;
padding-left: 10px;
}
p {
color: #808080;
font-family: arial;
font-size: 12pt;
margin-left: 215px;
}
ol {
color: #808080;
font-family: arial;
font-size: 12pt;
margin-left: 215px;
}
/*************************************************************
Code to make the first letter of each paragraph bigger
**************************************************************/
p.first:first-letter {font-size: 12pt; font-style: italic;}
/*************************************************************
Heading conditions
**************************************************************/
h1 { color: #FF0000;
font-family: arial;
font-size: 20pt;
margin-left: 215px;}
h2 { color: #FF0000;
font-family: arial;
font-size: 18pt;
margin-left: 215px;}
h3 { color: #FF0000;
font-family: arial;
font-size: 16pt;
margin-left: 215px;}
/*************************************************************
page divider properties
**************************************************************/
.crumb {
margin-left: 5px;
width:975px;
border-top: 1px solid #808080;
border-bottom: 1px solid #808080;
text-align: left;
}
.crumb p {
font-size: 10pt;
color: #FFFFFF;
margin-left: 215px;
}
.crumb a {
color: #FFFFFF;
text-decoration: underline;
}
.crumb a:hover {
color: #FFFFFF;
background-color: #666666;
text-decoration: underline;
}
.crumb a:active {
color: #FF0000;
}
.container
{
background-color: #000000;
width: 1024px;
}
.banner
{
height: 100px;
text-align: center;
}
.navigation
{
background-color: #000000;
text-align: center;
width: 800px;
}
.navigation p
{
font-size: 10pt;
margin-left: 215px;
}
.main
{
background-color: #000000;
width: 800px;
margin-left: 0px;
}
/****************************************************
Code to place footer
*****************************************************/
.bottomnav{
background-color: #000000;
width:800px;
text-align: center;
}
.bottomnav p{
font-size: 10pt;
margin-left: 215px;
}
.datemod{
background-color: #000000;
width:800px;
font-size: 10pt;
}
.datemod p {
margin-left: 330px;
font-size: 10pt;
}
.datemod span {
margin-left: 330px;
font-size: 10pt;
color: #FFFFFF;
}
a:active {
color: #FF0000;
margin-left: 215px;
}
a {
color: #FFFFFF;
margin-left: 215px;
text-decoration: underline;
}
a:hover {
color: #FFFFFF;
background-color: #666666;
margin-left: 215px;
text-decoration: underline;
}
I suppose just resign the divs in the above pages to id while the rest of the divs on the would be class?
-
Re: Picture Layout: Better way than using
Hi there Nightwalker83,
Quote:
Will that set-up interfere with the current setting in my css file?
I could not say. ;)
I posted an example which showed you a possible way of solving your problem.
If you have problems implementing it, then post a link to the site in question
and I may be able to do it for you - ( assuming that I have the time, of course ). :)
-
3 Attachment(s)
Re: Picture Layout: Better way than using
The code displays the layout like in the original picture when the style code is inside the html file. However, when the code is in the css file the pictures go down the page.
Css:
http://www.vbforums.com/attachment.p...1&d=1229215617
Html:
http://www.vbforums.com/attachment.p...1&d=1229215625
I attached the html with my code!
-
Re: Picture Layout: Better way than using
Hi there Nightwalker83,
all the stuff that you put in your previous post is not really of any help. :(
To be able to manipulate the code I need a link to the problematic site.
Also, as I am certain that you do not require an apple and a banana in your
page, it would be necessary to have the correct images that are to be used.
-
Re: Picture Layout: Better way than using
I have not uploaded the site yet as I am still creating it. All you need to tell me is what I am doing wrong in regards to the code you posted in the css file. :) Take for example the fruit pictures doing the above layout but using an external css file instead.
-
Re: Picture Layout: Better way than using
http://kontu.selfip.info/html.css.js/nightwalker/test/
Code:
<div class="main">
<h2>Characters</h2>
<p>The character in all versions of Silent Hill 1 remained the same they were:</p>
<ul class="gallery">
<li>
<p><img src="../images/alessagillespie.jpg" alt="Alessa Gillespie" title="Alessa Gillespie" /></p>
<p>Name: Alessa Gillespie</p>
<p>Age: 14</p>
<p>Other: She has the cult god inside her, Dahlia's daughter.</p>
</li>
<li>
<p><img src="../images/cherylmason.jpg" alt="Cheryl Mason" title="Cheryl Mason" /></p>
<p>Name: Cheryl Mason</p>
<p>Age: 7</p>
<p>Other: Found in Silent Hill when she was a baby and adopted. She returns to Silent Hill in 1983, but goes missing.</p>
</li>
</ul>
<p>
<a href="../html/sh1_full.html" tabindex="0" title="Back to previous page" target="_self">Previous page</a>
<a href="#top" tabindex="1" title="Back to Top" target="_self">Back to Top</a>
<a href="#" tabindex="2" title="Silent Hill full version(page 2)" target="_self">Next Page</a>
</p>
</div>
Code:
/****************************************************
Gallery
*****************************************************/
ul.gallery {
margin: 0 0 0 215px;
padding: 0;
width: 520px;
}
ul.gallery:after {
clear: both;
content: '';
display: block;
}
ul.gallery li {
display: block;
float: left;
list-style: none;
margin: 0;
padding: 0;
width: 260px;
}
ul.gallery p {
margin: 0;
padding: 10px;
}
Does not interfere with existing code. However, on the link I posted I have reformatted and slightly reorganized the CSS code.
You may wish to consider to use less general styles and adding more IDs and/or classes, setting a huge margin of 215 pixels to all paragraphs is a bit overkill. Instead of having the margin in paragraphs the margin could be in div.main for an example, or even in the main body.
-
Re: Picture Layout: Better way than using
@ Merri,
Thanks, that code seems like it works! However, I will take a better look at it tomorrow just to make sure. :)
Edit:
I also removed all the margins then tried setting in the body part of the css code.
-
Re: Picture Layout: Better way than using
I forgot to mention: the :after element jumps after floats on all browsers except IE6 and IE7. With IE6 and IE7 another trick is being used: setting explicit width to ul.gallery, thus causing an internal thing called hasLayout to turn on. This happens to give the same effect as is being done with the standard :after pseudo element.
So the code posted above is cross-browser without directly visible browser specific coding. This kind of coding also means that IE8 is likely to work just fine when it is released.
-
Re: Picture Layout: Better way than using
Quote:
Originally Posted by Merri
I forgot to mention: the :after element jumps after floats on all browsers except IE6 and IE7. With IE6 and IE7 another trick is being used: setting explicit width to ul.gallery, thus causing an internal thing called hasLayout to turn on. This happens to give the same effect as is being done with the standard :after pseudo element.
Strange I've tested the page in both IE 6 and Firefox and didn't notice any floating elements. What is the purpose of the :after element?
Quote:
So the code posted above is cross-browser without directly visible browser specific coding. This kind of coding also means that IE8 is likely to work just fine when it is released.
That's good! Not a lot of changing of the website code for different browsers.
-
Re: [RESOLVED] Picture Layout: Better way than using
The list elements (li) have been floated so that they appear next to each other. The :after element clears the floats so that the content that follows appears below the floated elements.
-
Re: [RESOLVED] Picture Layout: Better way than using
Quote:
Originally Posted by Merri
The list elements (li) have been floated so that they appear next to each other. The :after element clears the floats so that the content that follows appears below the floated elements.
Ah ok! Thanks for the info.
-
1 Attachment(s)
Re: [RESOLVED] Picture Layout: Better way than using
@ Merri,
Here is a screen shot of a page which uses the above layout. However, as you can see I have used horizontal ruled lines to separate the different sections of information. Is that ok to use? Or is there a way I can insert black space to keep information aligned correctly?
Thanks!
Edit:
I just validated the page using the w3c validator and it returns a lot of errors because of the header tags, hr tags, anchors and links. Is there a way to have the layout like in the attached picture? If so how?
-
Re: [RESOLVED] Picture Layout: Better way than using
I find that on the harder side to read, thus: are these informations related like this?
Note (notes): Tells Harry what to do next.
Rifle Bullets: Ammo for the hunting rifle.
Flauros: Found: Balkin Church.
Magned: Found: On the sofa of the motel reception, Silent Hill Resort Area. Used to get motorcycle key from crack in floor boards, room 3 at the motel.
-
Re: [RESOLVED] Picture Layout: Better way than using
Quote:
Originally Posted by Merri
I find that on the harder side to read, thus: are these informations related like this?
Note (notes): Tells Harry what to do next.
Rifle Bullets: Ammo for the hunting rifle.
Flauros: Found: Balkin Church.
Magned: Found: On the sofa of the motel reception, Silent Hill Resort Area. Used to get motorcycle key from crack in floor boards, room 3 at the motel.
Are you saying I should change the layout? It is using the layout you provided above. However, there is probably too much on the page. I will split the information over two pages.
Edit:
Maybe because I don't have any images on that I should use a normal page layout, not the layout above?
-
Re: [RESOLVED] Picture Layout: Better way than using
It isn't probably the amount of information: I'd say the main problem is having a lot of text of the same size and using the same distance between each of them.
Thus the easy solution: use slightly smaller text for the information text, and set a larger top margin to headers of these informative texts. This way you create a greater separation that is visually easier to understand.
You could, of course, use lines to divide etc. but this would add more "visual garbage". Using text styling and additional padding wouldn't add any clutter.
-
Re: [RESOLVED] Picture Layout: Better way than using
Quote:
Originally Posted by Merri
You could, of course, use lines to divide etc. but this would add more "visual garbage". Using text styling and additional padding wouldn't add any clutter.
Ah ok! Sob that leads back to my question in post #16. Is there to insert a place holder type thing instead of using:
and
Also when using the headers, anchors, links, etc within the gallery layout you provided in post #10 it causes problems when validating. How could I solve this problem but still achieve the same result (post #16)?
-
Re: [RESOLVED] Picture Layout: Better way than using
There can't be items between <ul> and <li> tags. Headers, links etc. should go within the list items.
Afaik you shouldn't have a need to use <hr /> at all as long as you're writing the list code properly.
-
Re: [RESOLVED] Picture Layout: Better way than using
The only reason I was using the <hr /> was so each section would be split correctly.
As with the <li> tags and the links, anchors, etc I tried this:
Code:
<ul class="gallery">
<li>
<a name="general" id="general"></a>
<h3>General</h3>
<p>Flash Light </p>
<p>So Harry can see in the dark.</p>
</li>
<li>
<p>Name: Health Drinks</p>
<p>Restores a percentage of Harry's health.</p>
</li>
<li>
<p>Name: Radio</p>
<p>Use: Emitts static when mosters are nearby.</p>
</li>
<li>
<p>Name: Map</p>
<p>Maps of Silent Hill's different areas.</p>
</li>
<li>
<p>Name: Bullets</p>
<p>Ammo for the hand gun.</p>
</li> <li>
<p>Name: Keys (Lion,scare crow, woodman, etc)</p>
<p>Unlocks locked doors throughout the game.</p>
</li>
<li>
<p>Note (notes)</p>
<p>Tells Harry what to do next.</p>
</li>
<li>
<p>Rifle Bullets</p>
<p>Ammo for the hunting rifle.</p>
</li>
<li>
<p>Flauros</p>
<p>Found: Balkin Church.</p>
<a href="#top" tabindex="1" title="Back to Top">Back to Top</a>
</li>
<li>
<p>Magnet</p>
<p>Found:On the sofa of the motel reception, Silent Hill Resort Area. <br /> Used to get motorcycle key from crack in floor boards, room 3 at the motel. </p>
</li>
<li>
<p></p><hr /><p></p>
<p></p><hr /><p></p>
</li>
<li>
<p></p><hr /><p></p>
<p></p><hr /><p></p>
</li>
<li>
<a name="school" id="school"></a>
<h3>School</h3>
<p>First Aid kit</p>
<p>Heals Harry a certain percentage.</p>
</li>
<li>
<p>Chemical</p>
<p>Used to get the gold medallion.</p>
</li>
<li>
<p>Medallions (gold and silver)</p>
<p>Used to solve the clock tower puzzle.</p>
</li>
<li>
<p>Rubber ball</p>
<p>Used to solve the drain pipe puzzle.</p>
</li>
<li>
<p>Shotgun Shells </p>
<p>Ammo for the shotgun.</p>
</li>
<li>
<p>Picture Card</p>
<p>Used to lock the door in the alternate school.</p>
</li>
<li>
<p>Ampoule</p>
<p>Restores Health.</p>
</li>
<li>
<p>Rubber ball</p>
<p>Used to solve the drain pipe puzzle.</p>
<a href="#top" tabindex="1" title="Back to Top">Back to Top</a>
</li>
<li>
<a name="hospital" id="hospital"></a>
<h3>Hospital</h3>
<p>Plastic Bottle</p>
<p>Found: In the hospital kitchen. Used: to hold Red Liquid, found in the hospital director's office.</p>
</li>
<li>
<p>Red Liquid</p>
<p>Found: See Above. <br /> Used: To cure Cybil during the boss fight.</p></li>
<li>
<p>Lighter</p>
<p>Found: Room 201 of Alchmilla (alternate) hospital. <br /> Used on vines to rearch store room of Alchmilla (alternate) hospital.</p>
</li>
<li>
<p>Disinfecting Alchol</p>
<p>Found: Intensive Care Unit of Alchmilla (alternate) hospital. <br /> Used: Same as above.</p>
</li>
<li>
<p>Video Tape</p>
<p>Found: in Hospital basement used in vcr in patient's room.</p>
</li>
<li>
<p>Plate of the cat</p>
<p>Found: room 306 of Alchmilla (alternate) hospital. <br /> Use: to solve the puzzle lock to the door of the nurses station.</p>
</li> <li>
<p>Plate of the Hatter </p>
<p>Found: room 204 of Alchmilla (alternate) hospital. <br />Use: Same as above.</p>
</li> <li>
<p>Plate of Queen</p>
<p>Found: In the Directors Office, 1st floor Alternate Alchemilla Hospital.<br />Use: Same as above.</p>
</li>
<li>
<p>Blood Pack</p>
<p>Found: 3rd floor store room of Alchmilla (alternate) hospital. <br />Used to distract the Blood sucker in Room 204.</p>
</li>
<li>
<p>Plate of the Turtle</p>
<p>Found: in the men's room on the third floor of Alchmilla (alternate) hospital. <br />Use: Same as above.</p>
<a href="#top" tabindex="1" title="Back to Top">Back to Top</a>
</li>
<li>
<a name="nowhere" id="nowhere"></a>
<h3>Nowhere</h3>
<p>Pliers</p>
<p>Found: In the operating room, in the basement of Nowehere. <br />Used on tap/faucet, 1st floor 'Nowhere', to release 'Key of Ophiel'. </p>
</li> <li>
<p>Screwdriver</p>
<p>Found: See Above.<br />Used to unscrew to metal plate from the wall, morgue 2nd floor of 'Nowhere', and reveal 'Key of Aratron'.</p>
</li>
<li>
<p>Ring of Contrast</p>
<p>Found 2nd floor jewellery shop, Nowhere. <br /> Used to connect chain that holds the refridgorator closed (1st floor Nowhere) so Harry can retrieve the dagger.</p>
</li>
<li>
<p>Stone of time</p>
<p>Used: on clock in the Nowhere antique shop to retrieve the key of Hagith.</p>
</li>
<li>
<p>Camera</p>
<p>Found: on the desk in the office (2nd floor) Nowhere. <br /> Used to open the doors on the third floor of Nowhere.</p>
</li>
<li>
<p>Amulet of Solomon </p>
<p>Found: Ophiel hall (1st floor) Nowhere. <br /> Used: one of the five objects to unlock the door in the child's room.</p>
</li>
<li>
<p>Ankh </p>
<p>Found: Graffiti room Phaleg hall (1st floor) Nowhere. <br /> Used: Same as above.</p>
</li><li>
<p>Crest of Mercury</p>
<p>Found 2nd floor jewellery shop, Nowhere. <br /> Used: Same as above.</p>
</li><li>
<p>Disc of Ouroboros</p>
<p>Found: Aratron room Phaleg hall (1st floor) Nowhere. <br /> Used: Same as above.</p>
</li> <li>
<p>Dagger of Melchoir</p>
<p>Found: See Ring of Contrast details. <br /> Same as above.</p>
</li>
</ul>
I also had to remove the <p> tags from around the <h> tags in-order for the code to validate correctly. That only leaves the problem about the links wrapping around. How what I solve that problem?
-
Re: [RESOLVED] Picture Layout: Better way than using
You can separate sections by ending first UL and starting a new one. This way you group the related information together.
Also, if you want to line up each pair, you need to add a style "clear: both" to list items that you want to start a new row. Thus items 3, 5, 7, 9 etc. could have the same newly defined class, like:
Code:
ul.gallery li.newrow {
clear: both;
}
Also, you don't need to use anchors. ID is enough for any element. This means you can save some syntax by simple changes: <h3 id="general">General</h3> — you can try it out, you'll still get into the correct position when clicking links to anchors.
-
Re: [RESOLVED] Picture Layout: Better way than using
Thanks! Just need to sort out the link wrapping now and that problem is resolved. Although, when I added the code above to the css file and put:
Code:
<li class="newrow">
<a id="general"></a>
<h3>General</h3>
<p>Flash Light </p>
<p>So Harry can see in the dark.</p>
</li>
For select items in the list there was no change to the layout (post #22).
-
1 Attachment(s)
Re: [RESOLVED] Picture Layout: Better way than using
Hm I have a minor problem while it has nothing to with the pictures it has something to do with the layout. The problem is for some reason one of the links is mis-aligned!
http://www.vbforums.com/attachment.p...1&d=1232611729
The first set of four links are mis-aligned! For some reason the links are not lining up like the other four links do.
mis-aligned links code:
Code:
<p><a href="#town" tabindex="3" title="Town">Town</a>
<a href="#school" tabindex="4" title="School">School</a><br />
<a href="#hospital" tabindex="5" title="Hospital">Hospital</a>
<a href="#nowhere" tabindex="6" title="Nowhere">Nowhere</a></p>
Aligned links:
Code:
<p><a href="#general" tabindex="17" title="General">General</a><a href="#school" tabindex="18" title="School">School</a><br /><a href="#hospital" tabindex="19" title="Back to Top">Hospital</a><a href="#nowhere" tabindex="20" title="Nowhere">Nowhere</a></p>
css:
Code:
div.main p {
margin-left: 215px;
}
Edit:
I managed to solve the problem by adding a few before the "School" link. The links were not aligning correctly because the first row was shorter in length than the row directly below it.
-
Re: [RESOLVED] Picture Layout: Better way than using
Since you're working with a list of links, you should consider using a real list:
Code:
<ul>
<li><a href="#town" tabindex="3" title="Town">Town</a></li>
<li><a href="#school" tabindex="4" title="School">School</a></li>
<li><a href="#hospital" tabindex="5" title="Hospital">Hospital</a></li>
<li><a href="#nowhere" tabindex="6" title="Nowhere">Nowhere</a></li>
</ul>
Now, the funny part to get it working visually the way you want is to define some style:
Code:
div.main ul {
list-style: none;
margin: 0 0 0 215px;
padding: 0;
width: 450px; /* this does the :after trick seen below for IE */
}
/* this will allow the content after the floated elements to come
after the floats instead of being aligned to the right side */
div.main ul:after {
clear: both;
content: '';
display: block;
}
/* this way of doing floats is just a way I've found to always behave well with IE */
div.main ul li {
display: inline;
float: left;
margin: 0;
padding: 0;
}
/* and now the block element... */
div.main ul li a {
display: block;
padding: 5px 5px;
width: 200px;
}
-
Re: [RESOLVED] Picture Layout: Better way than using
Quote:
Originally Posted by Merri
Since you're working with a list of links, you should consider using a real list:
Yeah, I know! However, for the above links I just moved them outside the gallery class div because they did not need to be inside that div. Your solution might solve the problem of getting the "back to top" links I'm using in the above mentioned layout to line up correctly. :)
-
Re: [RESOLVED] Picture Layout: Better way than using
That's strange! If I use:
html:
Code:
<p><a href="#top" tabindex="1" title="Back to Top">Back to Top</a></p>
css:
Code:
div.main p a{
margin-left: 345px;
}
I can get the right-hand side links to line up!
However, if I use:
html:
Code:
<a href="#top" class ="right" tabindex="1" title="Back to Top">Back to Top</a>
and
css:
Code:
div.main.right {
margin-left: 345px;
}
It does not! No matter if I include the "a" in the css function or not.
Edit:
I put the links:
Code:
<ul class="link">
<li><a href="#top" tabindex="1" title="Back to Top">Back to Top</a></li></ul>
then used the following in the css file:
Code:
ul.link li a{
display: block;
margin-left: 520px;
}
