Tue, 2010-09-07 23:17
Dear CSS community,
A few months ago I downloaded an HTML template from internet to work on my web site (index.html, style.css). For this, I put some figures on it, and because they didn't fit, I made some changes to them in a modified version of the template original version using the "position:absolute" parameter in some classes (home__25ago2010.html, seisgis_25ago2010.css). The section on the modified CSS is:
#header { background:url(../images/png/horizontal_header.png) no-repeat top right #0EA5FE; } #logo_ocean { padding:50px 60px 0 40px; height:130px; background:url(../images/png/horizontal_header.png) no-repeat #0EA5FE; } .header { position:absolute; top:115px; background:url(../images/png/vd.png) no-repeat 96% 20%; width:400px; height:80px; z-index:2; } .logo_ocean { position:absolute; top:90px; left:0px; font-family: "Myriad Pro", "Trebuchet MS", Arial; color:#fff; text-decoration:none; font-weight:bold; font-size:20px; text-transform:uppercase; letter-spacing:5px; } .logo_text { position:absolute; top:105px; left:0px; width:300px; font-size:11px; color:#fff; line-height:12px; padding-top:10px; } .flag { padding:20px; float:right; }
After reading some web sites about CSS and HTML, I realized that working with such position is usually a bad practice. Because I'm newbie about HTML and CSS, it's a nightmare to put the figures as I want. The figure "1.png" is how I want the web site. The figure "2.png" is how I have it now.
Please, I'd be very grateful if you could check my files and help me on this.
Thank you for your time and attention,
Best regards,
Gery
| Attachment | Size |
|---|---|
| 1.png | 319.72 KB |
| 2.png | 275.28 KB |
| seisgis_25ago2010.css_.txt | 3.17 KB |
| home__25ago2010.html_.txt | 3.93 KB |
| index.html_.txt | 5.14 KB |
| style.css_.txt | 2.65 KB |
Wed, 2010-09-08 01:10
#1
Can you post a link to the
Can you post a link to the page rather than us having to download a bunch of files and put them all together?
Wed, 2010-09-08 13:14
#2
Reply with all CSS and HTML
Thnks for your answer, I tried to put all my CSS and HTML here but it is not allowed. Please download all my code in the attached txt file. Where can I upload my HTML? I don't have a serve nor a domain for this.
| Attachment | Size |
|---|---|
| Document.txt | 15.3 KB |
Wed, 2010-09-08 14:16
#3
Gery wrote: I don't have a
I don't have a serve nor a domain for this.
there are hundreds of free web hosting services out there. Just research "free web host". Make sure you choose one that has enough space (MB) for your content.
First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS
Fri, 2010-09-10 23:28
#4
web link on fee web host
Please receive the link where my web site has been uploaded: http://users5.nofeehost.com/elgery/
Also, attached you can find the PNG with the desired images distribution (e.g. flag). This is my CSS file:
/* seisgis_25ago2010.css: This file was modified from Gery's' CSS (seisgis_02jul2010.css) by Coco's friend (Phillipe Calmet). Last modification date: 25 August 2010 */ /**/ body { margin:40px; font-size:0.9em; line-height:14px; font-family:Tahoma, Arial; font-size:12px; border:1px solid #000; background:url(../images/png/vertical_header.png) repeat-x #0A8FDE; } a { color:#10639a; text-decoration:none;} a:hover { text-decoration:underline;} p { padding: 0 10px 5px 10px; } h1 { font-family: "Myriad Pro", "Trebuchet MS", Arial; margin:0; padding:10px 0 0 10px; text-transform:uppercase; font-size:18px; color:#10639a; } #header { background:url(../images/png/horizontal_header.png) no-repeat top right #0EA5FE; } #logo_ocean { padding:50px 60px 0 40px; height:130px; background:url(../images/png/horizontal_header.png) no-repeat #0EA5FE; } .header { position:absolute; top:115px; background:url(../images/png/vd.png) no-repeat 96% 20%; width:400px; height:80px; z-index:2; } .logo_ocean { position:absolute; top:90px; left:0px; font-family: "Myriad Pro", "Trebuchet MS", Arial; color:#fff; text-decoration:none; font-weight:bold; font-size:20px; text-transform:uppercase; letter-spacing:5px; } .logo_text { position:absolute; top:105px; left:0px; width:300px; font-size:11px; color:#fff; line-height:12px; padding-top:10px; } .flag { padding:20px; float:right; } #menu { background:url(../images/gif/menu.gif) repeat-x #fff; height:40px; padding-top:10px;} #menu_list {width:600px; margin:0 auto;} #menu a { display:block; color:#000000; float:left; font-size:14px; text-transform:uppercase; font-weight:bold; text-decoration:none; margin:0 20px; padding-top:12px; font-family: "Myriad Pro", "Trebuchet MS", Arial;} #menu a:hover{ color:#078DE2;} .splitter { display:block; float:left;} .item img { background-color:#FFFFFF; padding:6px; border:1px solid #d0d0d0;} .item a { display:block; float:left; font-size:12px; color:#bd131d;} .description { display:block; float:right; width:220px; padding: 10px 20px 30px 0; line-height:12px; font-size:11px; } p.additional { margin:0 10px; color:#9c9c9c; font-size:11px; line-height:15px; border-top:1px solid #bdbdbd; padding: 10px 0; font-weight:normal;} #text { margin: 0 292px 0 0; background:url(../images/gif/content.gif); padding:10px;} #text li {list-style:none; padding-left:20px; background:url(../images/gif/point.gif) no-repeat 0px 4px;line-height:18px;} #sidebar { float:right; width:245px; padding: 20px 20px 0 30px; font-size:10px; } #sidebar a{ font-weight:bold; } #sidebar h1 { font-family: "Myriad Pro", "Trebuchet MS", Arial; margin:0; padding:0 0 20px 0; text-transform:uppercase; color:#000;} #main { float:none; height:550px; background:url(../images/gif/sidebar.gif) no-repeat top right #fff; } #footer {font-family: "Myriad Pro", "Trebuchet MS", Arial; background:url(../images/gif/footer_horizontal.gif) repeat-x #000; height:55px; clear:both; } #left_footer { float:left; padding:20px 0 0 30px; color:#fff; font-size:12px;} #left_footer a { color:#fff;} #left_footer a:hover { text-decoration:none;} #right_footer { float:right; padding:20px 30px 0 0; color:#fff; font-size:12px; text-align:right;} #right_footer a { color:#fff;}
Thanks in advance.
| Attachment | Size |
|---|---|
| 1.png | 319.72 KB |
Sat, 2010-09-11 04:27
#5
web link on fee web host
Please receive the link where my web site has been uploaded: http://users5.nofeehost.com/elgery/
Also, attached you can find the PNG with the desired images distribution (e.g. flag). This is my CSS file:
/* seisgis_25ago2010.css: This file was modified from Gery's' CSS (seisgis_02jul2010.css) by Coco's friend (Phillipe Calmet). Last modification date: 25 August 2010 */ /**/ body { margin:40px; font-size:0.9em; line-height:14px; font-family:Tahoma, Arial; font-size:12px; border:1px solid #000; background:url(../images/png/vertical_header.png) repeat-x #0A8FDE; } a { color:#10639a; text-decoration:none;} a:hover { text-decoration:underline;} p { padding: 0 10px 5px 10px; } h1 { font-family: "Myriad Pro", "Trebuchet MS", Arial; margin:0; padding:10px 0 0 10px; text-transform:uppercase; font-size:18px; color:#10639a; } #header { background:url(../images/png/horizontal_header.png) no-repeat top right #0EA5FE; } #logo_ocean { padding:50px 60px 0 40px; height:130px; background:url(../images/png/horizontal_header.png) no-repeat #0EA5FE; } .header { position:absolute; top:115px; background:url(../images/png/vd.png) no-repeat 96% 20%; width:400px; height:80px; z-index:2; } .logo_ocean { position:absolute; top:90px; left:0px; font-family: "Myriad Pro", "Trebuchet MS", Arial; color:#fff; text-decoration:none; font-weight:bold; font-size:20px; text-transform:uppercase; letter-spacing:5px; } .logo_text { position:absolute; top:105px; left:0px; width:300px; font-size:11px; color:#fff; line-height:12px; padding-top:10px; } .flag { padding:20px; float:right; } #menu { background:url(../images/gif/menu.gif) repeat-x #fff; height:40px; padding-top:10px;} #menu_list {width:600px; margin:0 auto;} #menu a { display:block; color:#000000; float:left; font-size:14px; text-transform:uppercase; font-weight:bold; text-decoration:none; margin:0 20px; padding-top:12px; font-family: "Myriad Pro", "Trebuchet MS", Arial;} #menu a:hover{ color:#078DE2;} .splitter { display:block; float:left;} .item img { background-color:#FFFFFF; padding:6px; border:1px solid #d0d0d0;} .item a { display:block; float:left; font-size:12px; color:#bd131d;} .description { display:block; float:right; width:220px; padding: 10px 20px 30px 0; line-height:12px; font-size:11px; } p.additional { margin:0 10px; color:#9c9c9c; font-size:11px; line-height:15px; border-top:1px solid #bdbdbd; padding: 10px 0; font-weight:normal;} #text { margin: 0 292px 0 0; background:url(../images/gif/content.gif); padding:10px;} #text li {list-style:none; padding-left:20px; background:url(../images/gif/point.gif) no-repeat 0px 4px;line-height:18px;} #sidebar { float:right; width:245px; padding: 20px 20px 0 30px; font-size:10px; } #sidebar a{ font-weight:bold; } #sidebar h1 { font-family: "Myriad Pro", "Trebuchet MS", Arial; margin:0; padding:0 0 20px 0; text-transform:uppercase; color:#000;} #main { float:none; height:550px; background:url(../images/gif/sidebar.gif) no-repeat top right #fff; } #footer {font-family: "Myriad Pro", "Trebuchet MS", Arial; background:url(../images/gif/footer_horizontal.gif) repeat-x #000; height:55px; clear:both; } #left_footer { float:left; padding:20px 0 0 30px; color:#fff; font-size:12px;} #left_footer a { color:#fff;} #left_footer a:hover { text-decoration:none;} #right_footer { float:right; padding:20px 30px 0 0; color:#fff; font-size:12px; text-align:right;} #right_footer a { color:#fff;}
Thanks in advance.
| Attachment | Size |
|---|---|
| 1.png | 319.72 KB |
Mon, 2010-09-13 19:50
#6
Gery wrote: The figure
The figure "1.png" is how I want the web site. The figure "2.png" is how I have it now.
1. the flag. simply move the .flag inside #header. Float it right
2. you need a container that holds everything together. then just float right #logo_text
First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS
Fri, 2010-09-17 14:14
#7
Many thanks for your answer
Many thanks for your answer CupidsToejm. I tried your suggestion about the flag but still don't get it. Could you help me a litlle bit more please? what should I put inside the container?
Fri, 2010-09-17 15:39
#8
everything goes inside the
everything goes inside the container.
First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS
Mon, 2010-09-20 03:00
#9
Thanks to all for your
Thanks to all for your answers (lol), I solved my problem, I just erased the position:absolute, use float both right and left, add the padding-top and change the div position in my HTML.