|
HTML - I'm Not Sure How To Code This Layout
Well I made this layout in photoshop for my clans website, problem is I'm not quite sure how to code it.
I'm fairly new to web editing but i'm eager to learn Heres my first web site www.naturalenemies.net It was in need of a new layout (as you probably noticed ) so i made one in photoshop Heres the layout I was just going to cut out the center and use the blue sides as a background, then divide the actual layout into tables (one for the banner, one for the nav bar, and one for the bottom) and basically add different backgrounds for each (except for the nav bar which would of been a little bit more difficult because it needs to be interactive). But after trying to do that I realize that's completely wrong >.< The main problem i had was this spacing problem http://img717.yfrog.com/img717/4042/spacingproblem.png Basically, all I need to know is how would i go about coding a layout like this. Can anyone help me get on the right track? Similar TutorialsHi all, I'm trying to achieve a layout like below: My code is as follows: Code: <body>
<center>
<div style="width:740px;border:1px solid black;" class="dt">
<div class="dr">
<div class="dc" style="width:277px;border:1px solid black;float:left;">
<img alt="" src="images/Logo.gif" width="277" height="275" />
</div>
<div style="width:455px;float:right;padding-bottom:10px; text-align:right; clear:right;border:1px solid black;">
<img alt="" src="images/spacer.gif" height="7" style="display:block" />
<a href="#" class="post">Home</a> |
<a href="#" class="post">T-shirts</a> |
<a href="#" class="post">FAQ</a> |
<a href="#" class="post">Contact</a> |
<a href="#" class="post">About</a> |
<a href="#" class="post">View cart</a>
</div>
<div style="float:right;border:1px solid black;">
<img alt="" src="images/centerfoto.jpg" width="450" height="246" />
</div><br />
</div>
</div>
</center>
</body>
And my CSS as follows: Code: .dt {
display: table;
width:100%;
}
.dr {
display: table-row;
width:100%;
height:100%;
}
.dc {
display:table-cell;
}
Is this the right way to achieve this kind of exact layout? If not, anyone can help me? I've been trying this **** for 5 days adjusting the code here and there, but it seems to really screw up in FF. Seems to work in IE, though. The worse thing is, there's a really strange super-elusive bug somewhere in the webpage when run under FF. At random times, the layouts of the images etc. goes haywire, and I need to click the "Reload" button on FF and the 2nd time, it loads, everything is ok. Then, suddenly, next time when I see the site, outta the blue, the bug appears again. I believe all these problems can be fixed once the orthodox, correct way of coding is used. And needless to say, I'm a HTML / CSS crapper and only knows how to change values around to make things look ok, although the underlying structure can "collapse" anytime! *PS*: To make things simple, I didn't include any code for the "Content" area. Help! Xeon Hi ! Found this code below in this HTML section.( How to make images & text boxes line up.) Thanks Coothead, but needs a "table" apparently. Need ( 6, say ) thumbnails across the page. Space around. Then, underneath, same again - and so on. Like a chess board This code brings up the FULL size image, in line across. Please could you add what is needed? Then I could use it as a template (?) and tweek the sizes (?) No text required. <table> <tr> <td><img src="pic1.gif"></td> <td><img src="pic2.gif"></td> </tr> </table> Thank you in advance for any help - Hello, I am a student and working on a simple first project. All I'm doing right now is writing my code in text edit, saving it as "test.html", and dragging and dropping the file onto Safari/Firefox to view my code. Everything works when I'm at my college's computer lab, but when I'm on my own mac notebook, the files load in the browser as my code. I've tried a variety of samples and checked my preferences, but I can't figure out what I'm doing wrong. Sample code I'm using - <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> <HTML> <HEAD> <TITLE>Simple Link Example 2</TITLE> </HEAD> <BODY> <H1 ALIGN="CENTER">Creating Relative Reference Links</H> <HR> <P>Open <A HREF="practice1.html">Practice 1</A>.</P> <P> Open <A HREF="practice2.html">Practice 2</A>.</P> <P>Open <A HREF="practice3.html" TARGET="_blank"> Practice 3</A> in a new window.</P> </BODY> </HTML> Please help! I'm trying to wrap up an assignment and have been banging my head against the wall all night. Thanks! cordelia Hello! I have a blog on blogger and i want to make a c++ tutorial.. But every time i type "<iostream>" on post, when i see it, it is only "iostream". How can i make a code like the "[code]" from BBcode to cancel the compiling from HTML? Thanx! I was curious to find out, where can i find a cool looking shoutbox code where i can put on my message forum? Looking for some neat, and cozy with some advance options. Meaning, i would like to change the colors to match with my forum and stuff. Thanks. Are there in depth tutorials on making a Div layout? Tables are making way more sense. How do you make a div float to the right of something without having it move to the bottom when a page is shrinked? How do you make a div take up space within a div that not taken out? Like in a div. 80%, inside that div is a 100px div, then have another div inside the 80% div that uses the rest of the space? and how do you fix this? http://vertion.fused.ws/div.html Ok, I've made some changes to my navigation bar on my website with Fireworks so its more interactive. I've now implemented into my html but it has throw a certain part out on the page. Its the small picture thumbs at the bottom of the page, they are supposed to be in one row accross the page, now they go underneath each other. I've been looking for ages now to see the problem but I can not work it out. Here are 2 links to the pages, the first one is the one that works previously and the second is the changed one. If you can see the problem I would be so grateful, thanks. http://www.ashley-stone.co.uk/psychedelic.htm http://www.ashley-stone.co.uk/psychedelic2.htm Ok so I'm making a layout for HabbTunez and I've put my navigation into a table and when you click the picture the navigstion comes down, but everything in the table I've made is centered vertically, click Here to see what I mean. If you want more info just ask. How would I go about laying this site out similar to this site? I don't want the bubble text in the blue banner, I want to leave that as it is on my site. Thanks for any help! Ok so I'm making a layout for HabbTunez and I've put my navigation into a table and when you click the picture the navigstion comes down, but everything in the table I've made is centered vertically, click Here to see what I mean. If you want more info just ask. this is the way it looks right now: http://christoffer.wicb.ots.dk/byrummet/ but i want it to look like this: also with the rounded cornors but i have tryed lot of things but cant get it to work can u help me?? I'd like to have an image "inside" a block of text such that the text surrounds it. Here's a mock-up: Is that possible? I've tried various things but no luck yet. Hey guys, I created a webpage with a some pictures and roll over images. The page turned out perfectly well, except when i minimize the browser size. All the images from the right push over to the left depending on the size of the browser. Why does this happen ? Thnx in advance !! Hope someone can help as I'm tearing my hair out at the moment!! I'm working on a site for a friend, I have only ever used basic html to code my own sites, due to this I'm having problems with the layout my friend wants. I've created it with frames, not live yet but you can view it he http://www.ladin.co.uk/Jim/index2.html The layout with color either side and content in middle is how he wants it but obviously without frames, I'm not very knowledgeable where CSS is concerned so haven't a clue how to code it, thanks in advance. Linda Is it possible for me to upload a picture of my template I sketched and you guys tell me what I need to do in order to accomplish this? http://i179.photobucket.com/albums/w293/Necro6666/th_****Layout.jpg Thats a link to a picture of my crappy layout going to ask a friend to make a background for me i just need a better layout if someone can help me i'll be gratful Heres the codeing HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Funt's Anime</title>
<style type="text/css">
body {
background-color: rgb(58, 95, 135);
margin-left: 10%;
margin-right: 10%;
border: 5px rgb(90, 150, 150);
padding: 30px 40px 10px 20px;
font-family: sans-serif;
}
</style>
<style type="text/css">
div.c1 {position:absolute;left:500px;top:-10px}
div.c2 {position:absolute;left:150px;top:58px;
margin-left: -5.11%;
margin-right: 55%;
border: 2px solid rgb(150, 150, 150);
padding: 0px 5px 0px 5px}
div.c3 {position:absolute;left:0px;top:58px;
background-color: rgb(205, 205, 205)}
div.c4 {position:absolute;left:0px;top:0px;
background-color: white}
div.c5 {position:absolute;left:403px;top:58px;
margin-left: -5.11%;
margin-right: 40%;
border: 2px solid red;
padding: 0px 5px 0px 5px}
div.c6 {position:absolute;left:703px;top:58px;
margin-left: -5.11%;
margin-right: 10%;
border: 2px solid green;
padding: 0px 0px 0px 0px}
</style>
</head>
<body>
<div class="c1">
<h1>Funt's Anime</h1>
</div>
<div class="c4">
<table width="1280">
<tr><td></td></tr>
</table>
<div class="c2">
<p align="center">Complete List</p>
<hr size="4" align="left" width="100%" color="gray">
<p>May, 09, 2009</p><p>The following Anime are complete:<ul>
</ul></p>
</div>
<div class="c5">
<p align="center">New Episodes</p>
<hr size="4" align="left" width="100%" color="red">
<p>The following have been added to Anime:<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li></ul>
</ul>
</div>
<div class="c3">
<table border="2">
<tr><td>Links</td></tr>
<tr><td><a href="Anime/AnimeList.html">Anime</a></td></tr>
</table>
</div>
</body>
</html>
I have this gif layout http://i21.tinypic.com/140dn5l.jpg But how Do i turn it into a website or like write stuff on it with html? Please help I can do a bit of html I am trying my hardest to swtich from tables to DIV's. but man they are picky... sometimes they work in IE but not in FF then in FF but not in IE.. My question is.. Where is the best place/book/website/forum to find out about the DIV craze.... To find info about how to lay out a website in pure CSS divs and no tables... Thanks.... P.S. (and off topic).. i hate that i have to almost write two CSS script.. one for IE hack and one for FF and other browsers... |
|||||||