PDA

View Full Version : css style


eusaf
07-22-2010, 10:41 PM
Howdy Club! I'm totally new to website scripting and I've been learning all by myself over a period of time. Me and my friend planned to start a website so I tried to script it with dreamweaver.
Everything was good till this happen :

http://img815.imageshack.us/i/asdasda.jpg/

http://img63.imageshack.us/i/asdasdfdf.jpg/

as you can see in the top screen shot , everything is fine!
but in the bottom screen shot under the 2nd embedded video, scripts are drastically mismanaged ! I tired alot but I can't figure out where it is messed up.
Here Is the css style of container :

<div id="container">
<div id="header">
<ul>
<li id="navtop"></li>
<li><a class="link" href="http://www.freewebsitetemplates">Strona gł&oacute;wna</a></li>
<li><a class="link" href="http://www.freewebsitetemplates">TOP 10</a></li>
<li><a class="link" href="http://www.freewebsitetemplates">Wysoko oceniane</a></li>
<li><a class="link" href="http://www.freewebsitetemplates">AKTUALNOŚCI</a></li>
<li><a class="link" href="http://www.freewebsitetemplates">O nas</a></li>
<li><a id="last" href="http://www.freewebsitetemplates">Kontakt</a></li>
<li id="navbottom"></li>

</ul>
</div>
<div id="content">
<div id="left">
<h3><img src="images/images.jpg" width="150" height="59" alt="youtube logo" /></h3>
<h3>AKTUALNOŚCI</h3>
<p>Niedziela 25 lipca, 2010 dodano nowe top 10 film&oacute;w Youtube. Prosimy o państwa głosy na ulubione teledyski.<br /><br />
</p>
</div>
<div id="middle">
<h3>10 NAJLEPSZYCH TELEDYSKOW YOUTUBE</h3>
<p>10 najlepszych teledysk&oacute;w tego tygodnia.</p>
<p>&nbsp;</p>
<p>
<object width="187" height="141"><param name="movie" value="http://www.youtube.com/v/olJ4p4Gw5qc&amp;hl=en_US&amp;fs=1?rel=0&amp;color1=0x006699&amp;co lor2=0x54abd6&amp;border=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/olJ4p4Gw5qc&amp;hl=en_US&amp;fs=1?rel=0&amp;color1=0x006699&amp;co lor2=0x54abd6&amp;border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="187" height="141"></embed></object>
</object>
<br />
</p>
<p>&nbsp;</p>
<p>
<object width="187" height="141"><param name="movie" value="http://www.youtube.com/v/olJ4p4Gw5qc&amp;hl=en_US&amp;fs=1?rel=0&amp;color1=0x006699&amp;co lor2=0x54abd6&amp;border=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/olJ4p4Gw5qc&amp;hl=en_US&amp;fs=1?rel=0&amp;color1=0x006699&amp;co lor2=0x54abd6&amp;border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="187" height="141"></embed></object>
</object>
<br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a href="http://www.freewebsitetemplates"></a></p>
</div>
<div id="right">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>

I googled dreamweaver forums and this where it brought me. I didn't see any intro or help board so I'm simply posting here! If this is the wrong corner please move this thread to the rite one.
I need help ASAP ! I'm looking forward to it
-Regards.

eusaf
07-23-2010, 12:30 AM
oh dang image shack, here is the photobucket version ftw !


http://i571.photobucket.com/albums/ss152/Eusaf/asdasd-1.jpg

http://i571.photobucket.com/albums/ss152/Eusaf/asdasdfdf.jpg

MagicPower
07-23-2010, 02:25 AM
what's the problem here, is it the background colour?

eusaf
07-23-2010, 02:31 AM
yes, I want it to be same in center and right !
left is ok . but look at that dark green color patch in bottom right and that muddish color in central bottom . I want to get rid of these two !

MagicPower
07-23-2010, 02:40 AM
y not wrap your embeded code in divs there, you can always move it around freely, better than p tags. can you post css code as well.

eusaf
07-23-2010, 03:02 AM
I'm not sure but I'm making some silly error here! and I've gone so deep to omit it that I'm lost :roll:

body {
background: #020104 url(images/bodybg.gif) repeat-x;
color: #4c5b38;
font-family: tahoma, arial;
font-size: 10px;
margin: 0px;
padding: 0px;
text-align: center;
}
* {margin:0px;padding:0px;}
#header ul{
margin: 20px 25px 25px 20px;
padding:0px;
display:block;
color:#c5b16b;
width:auto;
width: 110px;
position:absolute;
background-color:#FF0000;
}
#header li{
background-color:#cebc7d;
width: 136px;
text-align:left;
padding: 0px 0px 1px 10px;
list-style-type: none;
}
.link,#last {
font-size: 14px;
font-weight:900;
text-decoration: none;
padding:0px;
margin:0px;
text-transform: uppercase;
width: 120px;
display:block;
color: #4c5b38;
font-size: 14px;
font-weight: bold;
position:relative;
text-align:center;
}
.link:hover, #last:hover{
color:#4c5b38;
}
.link {border-bottom: 1px dashed #9c8f5e;}
#last {border-bottom: 0px none #9c8f5e;}
#navtop{
background-image:url(images/navtop.gif);
background-repeat: no-repeat;
display:block;
width:146px;
height:20px;
}
#navbottom{
background-image:url(images/navbottom.gif);
display:block;
width:146px;
height:19px;
background-repeat: no-repeat;
background-position: left bottom;
}
p a:link {
color: #4c5b38;
font-size: 14px;
font-weight: bold;
text-decoration: underline;
}

p a:visited {
color: #7a6b3e;
font-size: 14px;
font-weight: bold;
text-decoration: underline;
}

p a:hover, a:active {
color: #7a6b3e;
font-size: 14px;
font-weight: bold;
text-decoration: none;
}
p{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: normal;
color: #4c5b38;
}
#container {
margin: 30px auto;
text-align: left;
width: 785px;
display:block;
position:relative;
color: #4c5b38;
}
#header {
width: 785px;
height: 351px;
margin:0px;
display:block;
background-image: url(images/header.jpg);
background-repeat: no-repeat;
position:relative;
background-color: #4c5b38;
}
#content {
background: url(images/contentbg.gif) repeat-y;
width: 785px;
}
h3{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bolder;
font-variant: normal;
text-transform: uppercase;
color: #4c5b38;
text-decoration: none;
margin-bottom:20px;
}
#left {
position:relative;
margin-left:5px;
float:left;
padding: 10px 10px 10px 20px;
display:inline;
background: url(images/contentbg.gif) repeat-x;
width: 250px;
}
#djset{
position:absolute;
bottom:0px;
right:0px;
}
#middle {
padding: 10px 10px 10px 20px;
position:relative;
float:left;
display:inline;
background: url(images/leftbg.gif) repeat-x;
width: 200px;
}
#photos{
position:absolute;
bottom:0px;
left:0px;
border: 0px none #FFFFFF;
}
#right {
float:left;
display:inline;
background: url(images/leftbg.gif) repeat-x;
width: 265px;
}
#right p{
padding: 10px 10px 10px 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: normal;
color:#4c5b38;
}
#right p a{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: normal;
color:#e5d7a7;
}

#right img{
border: 0px none #FFFFFF;
}
.clear{clear:both;}
#footer {
margin-left:5px;
display:block;
background: url(images/footerbg.gif) repeat-x;
width: 775px;
height:67px;
}
#footer p{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
font-variant: normal;
text-transform:none;
color: #f1e6c0;
text-decoration: none;
text-align:center;
padding-top:20px;
}


help will be more then appreciated !

MagicPower
07-23-2010, 03:40 AM
from what i can see i think the muddish colour on the right comes from one of the .gif images which you have set to repeat most probably #content which you have set to repeat y. have a play around with it, hope that helps. altertanatively post a live link

eusaf
07-23-2010, 10:38 AM
ok so here is a live link !
website (http://whirpool.site11.com/)
I want to get rid of that dark green color on right.

DWcourse
07-23-2010, 05:00 PM
"You are seeing this page because the system administrator of 000webhost.com is currently checking this website for malicious content."

eusaf
07-23-2010, 06:02 PM
no but it my DW view, its still the same !

DWcourse
07-23-2010, 06:38 PM
I know but we can't look at it until 000webhost.com is through checking it.

eusaf
07-23-2010, 07:17 PM
oh I see , i thought you were passing a comment : guess its a error !
but I can open and browse it easily :/

Corrosive
07-24-2010, 08:40 AM
I can open it now. You have a line that says;


#content {
background: url(images/contentbg.gif) repeat-y;
width: 785px;
}

The open image called contentbg.gif and you'll see that it is a thin slice of background (light brown and dark green) that is repeated y to make up your background.

Two ways to change the green background would be 1. remake that image without the dark green in your graphics editor or 2. remove the image from the styles all together and use a solid colour in CSS;

#content {
background-color: #E0CE96;
width: 785px;
}

Hope that helps.

eusaf
07-24-2010, 12:26 PM
alright so I tried using a color css , and removed that image for right P.
everything else was looking good but that dark green right float is still there !
i've crossed check the code and css like 10 times and I didn't see anything about this color or image ...

http://whirpool.site11.com/

Corrosive
07-24-2010, 12:39 PM
I posted exactly what code to look at. How can you still not find it?? It is #content.

eusaf
07-24-2010, 12:41 PM
ok another question !
is there a way i can merge center with the right part so both use same settings?
in this way hopefully i can get rid of that green patch on right !
PS : Code in first post.

eusaf
07-24-2010, 12:50 PM
ok corrosive , i found it and i changed it with the color .
now problem is that this substitution also removes the main background image and turns it to black !

Corrosive
07-25-2010, 10:42 AM
ok corrosive , i found it and i changed it with the color .
now problem is that this substitution also removes the main background image and turns it to black !

Can you show us a link to a page where this has happened please? It might be a simple fix. Did you try my other method of editing the image and leaving the code as it is? That might be a better way to go. Do you have Photoshop?