New Posts  All Forums:Forum Nav:

HTML5 help

post #1 of 3
Thread Starter 
Hey guys. I haven't made a website in forever an a day and now I have to make one for a competition in exactly 1 week.......yay. Below is my main code and I have the two pics attached. background.jpg 179k .jpg file title.jpg 39k .jpg file

I am trying to make it so that I have the back ground image not effect the banner at all. I have fought for the past hour with the ":not ()" exception, but it doesn't want to get off the banner.

Next up is I want the image to be opaque in the article section of the website. I have searched google enough to know that I can not find what I am looking for.

Lastly, the reason I want to get rid of the back ground image on the banner is so that I can increase the opaqueness of the banner image without seeing the back ground image. I do know how to do this, but for some reason when I increase the opaqueness of the image, the text also turns opaque as well. No idea why considering that I specified the text in a whole different argument.

(((Also, if you are wondering why there is barely and info on the website, it is because I just really started today))))

Any help would be appreciated. thumb.gif

Here is my main CSS code.

*{
margin: 0px;
padding: 0px;
}
h1{
font: bold 45px Tahoma;
}
h2{
text-align:center;
font: bold 16px Tahoma;
margin:15px
}
head, section, nav, article{
display:block;
}

body{
text-align:center;
background-image:url("images/background.jpg");not(#website);
Background-repeat:no-repeat;
Background-size:100%;
}
#website{
border: 1px solid black;
width: 1000px;
margin: auto;
}
#top_header{
text_align: center;
background-image:url("images/title.jpg"); opacity:1;
padding:20px;
}
#top_navagation{
background:-webkit-linear-gradient(top,red,black);
color:white;
text-align:left;
}
#top_navagation li{
display:inline-block;
list-style:none;
padding: 10px;
font: bold 13px Tahoma;
}
#introduction{
text-align:left;
padding: 15px;
}
#video1{
text-align:center;
margin: 15px 0px;
}


And here is my main html code.
Code:
<!doctype html>
<html lang="en">
<head>
        <meta charset="utf-8" />
        <title>Biocomputing</title>
        <link rel="stylesheet" href="main.css" />
</head>
<body>
        <div id="website">
                <header id="top_header">
                <h1>The Future Possibility of Biocomputing</h1>
                </header>
                <nav id="top_navagation">
                        <ul>
                                <li>Home</li>
                                <li>DNA Data Storage</li>
                        </ul>
                </nav>
                <section id="introduction">
                        <article>
                                <header>
                                        <h2>The Colapse of the Silcon Era</h2>
                                </header>
                                        <p> Over the years computing performance has been governed by Moore's Law which states that the number of transistors on a silicon chip will double about every two years. This law has held true for several years and has been the back bone principal that drives the age of computers. Unfortuneatley Moore's Law is starting to loose it's steam. Dr. Micho Kaku explains the future colapse of silicon based microprocessors.</p>
                        <div id="video1"><iframe width="560" height="315" src="http://www.youtube.com/embed/bm6ScvNygUU" frameborder="5px" allowfullscreen></iframe></div>
                        </article>
                </section>
        </div>
</body>
</html>
Yin&Yang
(19 items)
 
Soon
(15 items)
 
 
CPUMotherboardGraphicsRAM
i7 4820K Gigabyte X79 UP4 GTX 660 (waiting for new AMD cards) Samsung green  
Hard DriveHard DriveCoolingOS
Adata SP900  Seagate 2TB hard drive (the power of 1 edition)  Custom WC Loop Linux (various versions) 
MonitorKeyboardPowerCase
Samsung SyncMaster T240HD Coolermaster XT Green switches XFX 1000w Corsair 800D 
MouseMouse PadAudioAudio
Razer Naga Epic 2014 edition Razer Vespula Stax Lambda Nova Classic Custom DIY DAC 
AudioAudioOther
300b PP monoblocks Snell J3 NZXT Hue 
CPUCPUMotherboardGraphics
8 core xeon E6 @ 3.5ghz 8 core xeon E6 @ 3.5ghz EVGA X99 SR?  AMD 390x 
GraphicsRAMHard DriveCooling
AMD 390x 128 GB ECC DDR4  1TB PCI-e SSD Custom WC Loop 
OSMonitorKeyboardPower
Linux 16:10 Samsung PLS 4K monitor Corsair RGB keyboard with custom cherry MX supe... EVGA 1600 watt titanium  
CaseMouseAudio
Caselabs Magnum STH10 DIY my own mouse Snell J 3 
  hide details  
Reply
Yin&Yang
(19 items)
 
Soon
(15 items)
 
 
CPUMotherboardGraphicsRAM
i7 4820K Gigabyte X79 UP4 GTX 660 (waiting for new AMD cards) Samsung green  
Hard DriveHard DriveCoolingOS
Adata SP900  Seagate 2TB hard drive (the power of 1 edition)  Custom WC Loop Linux (various versions) 
MonitorKeyboardPowerCase
Samsung SyncMaster T240HD Coolermaster XT Green switches XFX 1000w Corsair 800D 
MouseMouse PadAudioAudio
Razer Naga Epic 2014 edition Razer Vespula Stax Lambda Nova Classic Custom DIY DAC 
AudioAudioOther
300b PP monoblocks Snell J3 NZXT Hue 
CPUCPUMotherboardGraphics
8 core xeon E6 @ 3.5ghz 8 core xeon E6 @ 3.5ghz EVGA X99 SR?  AMD 390x 
GraphicsRAMHard DriveCooling
AMD 390x 128 GB ECC DDR4  1TB PCI-e SSD Custom WC Loop 
OSMonitorKeyboardPower
Linux 16:10 Samsung PLS 4K monitor Corsair RGB keyboard with custom cherry MX supe... EVGA 1600 watt titanium  
CaseMouseAudio
Caselabs Magnum STH10 DIY my own mouse Snell J 3 
  hide details  
Reply
post #2 of 3
Quote:
I am trying to make it so that I have the back ground image not effect the banner at all. I have fought for the past hour with the ":not ()" exception, but it doesn't want to get off the banner.

You can add background-color:#ffffff; to #website instead of using the not() . Not sure if this is what you intended to do.
Quote:
Lastly, the reason I want to get rid of the back ground image on the banner is so that I can increase the opaqueness of the banner image without seeing the back ground image. I do know how to do this, but for some reason when I increase the opaqueness of the image, the text also turns opaque as well. No idea why considering that I specified the text in a whole different argument.

Yeah this is a problem & the only workaround I know will be to place the H1 outside the "top_header" & then pull it in with negative margin.
My System
(13 items)
 
  
CPUMotherboardGraphicsRAM
i5 2500k ASUS - P8Z68-V/GEN3 GTX 770 DDR3 - 8G 
Hard DriveOSMonitorPower
WD Green Win 7 x64 Dell ST2320L Corsair 750TX 
CaseMouse
Coolermaster 310 Logitech G502 
  hide details  
Reply
My System
(13 items)
 
  
CPUMotherboardGraphicsRAM
i5 2500k ASUS - P8Z68-V/GEN3 GTX 770 DDR3 - 8G 
Hard DriveOSMonitorPower
WD Green Win 7 x64 Dell ST2320L Corsair 750TX 
CaseMouse
Coolermaster 310 Logitech G502 
  hide details  
Reply
post #3 of 3
To get a opacity in the article section, put this in the css:
Code:
background-color: rgba(255,255,255, 0.3);

It's a white background, with an opacity so that only the image appears to have an opacity in that article section.

For the header, I put another tag around the top_header:
Code:
<div id="header">
    <header id="top_header">
        <h1>The Future Possibility of Biocomputing</h1>
    </header>
</div>

Then in the css I:
Code:
#header {
background-color: white;
}

and
Code:
#top_header{
opacity: 0.5;
}

So this puts a white background behind the header image so when you put opacity on it the other background image doesn't show through.

The only problem with this is the h1 in the header gets faded out too, and I'm not sure how to remove the opacity from it. It inherits it because it is the child element.

Hope that helps.

Also in the #top_header you have a underscore instead of a dash.
Edited by the_dude - 3/20/13 at 8:38pm
My System
(16 items)
 
  
CPUMotherboardGraphicsRAM
i7 920 @ Stock Asus P6T ATI HD5870 OCZ 6GB 1333mhz 
Hard DriveHard DriveOptical DriveCooling
Samsung 840 Evo Caviar Black 640GB LG DVD Drive Cm Hyper 212+ 
CoolingOSMonitorPower
Arctic Cooling Accelero Twin Turbo II Windows 7 64bit ASUS VW246H Corsair HX850 
Case
CM 690 II Adavanced 
  hide details  
Reply
My System
(16 items)
 
  
CPUMotherboardGraphicsRAM
i7 920 @ Stock Asus P6T ATI HD5870 OCZ 6GB 1333mhz 
Hard DriveHard DriveOptical DriveCooling
Samsung 840 Evo Caviar Black 640GB LG DVD Drive Cm Hyper 212+ 
CoolingOSMonitorPower
Arctic Cooling Accelero Twin Turbo II Windows 7 64bit ASUS VW246H Corsair HX850 
Case
CM 690 II Adavanced 
  hide details  
Reply
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding