Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    Regular Coder
    Join Date
    Mar 2011
    Posts
    213
    Thanks
    10
    Thanked 1 Time in 1 Post

    -RESOLVED-How to make objects fill the full width of the screen

    Quick question,

    Im making a landing page where the background image is set at 100% width so it scretches to the width of the screen no mattter the resolution.

    My content will be placed within a div that is a transparent white box, positioned absolutely. I would like ti stretch it to 100% of the width as well, but so far there is a small gap from the left, and then it stretches.. I have it set to 100% width as well.. am I doing something wrong? Heres the code I have so far.


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Black Umbrella</title>
    <meta name="description" content="Don't let the name fool you. There's nothing gloomy about the Black Umbrella. Instead, this 'customize-your-own' cocktail bar embraces a simple yet welcoming atmosphere along with the prime location the corner of Washington and Orange Avenue. This independent-minded venue will give patrons an opportunity to let their imaginations run wild and come up with their own unique cocktails. Get creative enough and your one-of-a-kind cocktail might just have what it takes to be inducted into our Wall of Fame!" />
    <style type="text/css">
    .bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -5000;
    }

    #content{float:left;
    position:absolute;
    top:100px;
    height:250px;
    width:100%;
    background-color:#FFF;
    opacity:0.7;
    filter:alpha(opacity=70); /* For IE8 and earlier */}
    </style>
    </head>

    <body><div id="content">
    </div>
    <div align="center"><img src="images/back.jpg" class="bg"></div>
    </body>
    </html>
    Last edited by lmorales; 05-25-2012 at 07:32 PM.

  • #2
    Regular Coder
    Join Date
    Mar 2011
    Posts
    213
    Thanks
    10
    Thanked 1 Time in 1 Post
    another issue Im having is since my text and image are within a transparent div, they are as well transparent, how do I override this? I found an option using rgba but it doesnt work in i.e, so i doubt it would work.

  • #3
    New Coder
    Join Date
    May 2012
    Location
    Oregon, USA
    Posts
    16
    Thanks
    1
    Thanked 1 Time in 1 Post
    I was playing with a similar issue last night and found the bit of code below that served miracles for me. Maybe it will help in your case? I gave it a quick try with your code and it seemed to if I'm understanding your problem correctly.

    * {
    padding: 0px;
    margin: 0px;
    }

    To be honest I'm not entirely sure what exactly what the * is representing. I'm pretty sure it's representing all tags not already called out, but I'm not sure which specific ones are causing the desired effect on the padding and margin. If someone could elaborate on what the * is representing I'd much appreciate it so long as it doesn't distract from lmorales's question.

  • #4
    Regular Coder
    Join Date
    Mar 2011
    Posts
    213
    Thanks
    10
    Thanked 1 Time in 1 Post
    I think thats a general overwrite to all styles, so in this case it doesnt work as it seems to override my content divs.. but thanks!

  • #5
    New Coder
    Join Date
    May 2012
    Location
    Oregon, USA
    Posts
    16
    Thanks
    1
    Thanked 1 Time in 1 Post
    That's my assumption as well.

    It's not really overwriting your #content though, because you didn't specify the margin and padding in your #content. It's just overwriting the default values. If you specify the margin and padding in your #content does it work? Here's a snip of my code that's working for me in my application.

    Code:
    * { 
    margin: 0px;
    padding: 0px;
    }
    
    #container { 
    background-color: #ffffff;
    min-height: 100%;
    top: auto;
    position: relative;
    text-align: left;
    width: 100%;
    }
    
    #content { 
    margin: 0px auto 0px auto;
    padding: 0px 0px 100px 0px;
    width: 100%;
    }

    Here's the website I was using last night to figure out what I think is a similar problem. Some pretty cool stuff on it even if it doesn't help you in this application. Might be worth a quick look.

    http://nopeople.com/CSS%20tips/index.html

  • #6
    Regular Coder
    Join Date
    Mar 2011
    Posts
    213
    Thanks
    10
    Thanked 1 Time in 1 Post
    Actually, that does work, I think i just messed up my code earlier... and as for the parent/child transparency, yeah just doesnt work so i just used a transparent png rather than css transparency... weird quirk there..

  • #7
    New Coder
    Join Date
    May 2012
    Location
    Oregon, USA
    Posts
    16
    Thanks
    1
    Thanked 1 Time in 1 Post
    Phew, I thought I was going to be wrong there for a minute, can't have that!

    Honestly, I've just began to learn XHTML this term, and my instructor could be vastly better. This forum is proving to be a great bridge to that huge gap. Lots of quirks to learn. Your transparency issue was beyond anything I've looked at, so thanks for figuring that out for me before I had to struggle for hours.

  • #8
    Regular Coder
    Join Date
    Mar 2011
    Posts
    213
    Thanks
    10
    Thanked 1 Time in 1 Post
    Haha I have never learned html, css, or anything web related in school, I studied graphic design ( i.e print and whatnot) my job just figured i could just "pick it up" and make a million websites in like a week.


    Hey, you wouldnt know how to fix this new problem would ya? I have my background set to fill the screen, its like an image with black bars on top and bottom.. they want a floated right footer on it that is always on the bottom and in the black portion of the image.. is this possible?

  • #9
    New Coder
    Join Date
    May 2012
    Location
    Oregon, USA
    Posts
    16
    Thanks
    1
    Thanked 1 Time in 1 Post
    I would think it is possible. Actually, it sounds a bit like a variation of what I was trying to do when I found this page below. I wanted the footer to be at the bottom and stay there when the window is resized. Rather than make the width 100% just define it and float it right. Would that work?

    http://nopeople.com/CSS%20tips/full-...out/index.html

    Also, I'm pretty sure there's a really tacky way to do it too using some kind of script. Thankfully they've pretty much gone out of style. I'm sure there's tasteful examples though. Here's a tutorial and Javascript example of one floating in the top right.

    http://www.jtricks.com/javascript/na.../floating.html

  • #10
    Regular Coder
    Join Date
    Mar 2011
    Posts
    213
    Thanks
    10
    Thanked 1 Time in 1 Post
    Im not sure thats the same thing..then again, I dont really know.. My code so far is


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Black Umbrella</title>
    <meta name="description" content="Don't let the name fool you. There's nothing gloomy about the Black Umbrella. Instead, this 'customize-your-own' cocktail bar embraces a simple yet welcoming atmosphere along with the prime location the corner of Washington and Orange Avenue. This independent-minded venue will give patrons an opportunity to let their imaginations run wild and come up with their own unique cocktails. Get creative enough and your one-of-a-kind cocktail might just have what it takes to be inducted into our Wall of Fame!" />
    <style type="text/css">
    .bg {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -5000;
    }
    
    .body{background-color:#000;}
    
    #content{float:left;	
    position:absolute;
    	top:100px;
    	height:200px;
    	width:100%;
    	background:url(images/bar.png) repeat;}
    
    
    #info{position:relative;
    
    margin-left:auto;
    margin-right:auto;
    margin-top:auto;
    margin-bottom:auto;
    width:900px;
    height:200px;}
    
    #pic{float:left;
    padding:20px;
    padding-top:25px;
      }
    
    .text{
    	float:left;
    	color:#000;
    	font-family:"Myriad Pro";
    	padding-top:25px;
    }
    
    *{margin:0;
    padding:0;}
    
    #footer{position:absolute;
    bottom:0;
    right:0;
    width:500px;
    height:75px;
    height:100%;
    color:#FFF;
    }
    	a{text-decoration: none;color: #FFF;}
    	a:hover{color:#C60;}
    
    </style>
    </head>
    
    <body><div id="content"><div id="info"><div id="pic"><img src="images/logo.png" /><center>Coming Summer 2012</center></div><div id="text"><p><b><br/><br/>Don't let the name fool you. There&lsquo;s nothing gloomy about the Black Umbrella. Instead, this &lsquo;customize-your-own&rsquo;s cocktail bar embraces a simple yet welcoming atmosphere along with the prime location the corner of Washington and Orange Avenue. This independent-minded venue will give patrons an opportunity to let their imaginations run wild and come up with their own unique cocktails. Get creative enough and your one-of-a-kind cocktail might just have what it takes to be inducted into our &quot;Wall of Fame!&quot;</b></p></div></div>
    </div>
    <div align="center"><img src="images/back.jpg" class="bg" alt="background image"/></div><div id="footer">&copy;2012 A proud member of the <a href="http://www.dtentertainmentdistrict.com">Downtown Entertainment District</a></div>
    </body>
    </html>


    But my footers at the very top right atm for some reason...
    Last edited by VIPStephan; 05-29-2012 at 07:45 PM. Reason: added code BB tags

  • #11
    New Coder
    Join Date
    May 2012
    Location
    Oregon, USA
    Posts
    16
    Thanks
    1
    Thanked 1 Time in 1 Post
    Take the "height:100%;" out of your #footer. You defined the height, but then said 100%, so it went with the 100%.

  • #12
    Regular Coder
    Join Date
    Mar 2011
    Posts
    213
    Thanks
    10
    Thanked 1 Time in 1 Post
    http://blackumbrellacoffee.com/test/index.html


    that sorta works, but if you see its not really at the complete bottom, and if you resize the window, the footer encroaches on the background image.. I think i should probably start a new topic
    Last edited by lmorales; 05-25-2012 at 07:32 PM.

  • #13
    New Coder
    Join Date
    May 2012
    Location
    Oregon, USA
    Posts
    16
    Thanks
    1
    Thanked 1 Time in 1 Post
    Yea, your footer text isn't respecting the div's. Here's the code for my page with respectful footer text. I can't really pin what it is in your code that's causing the text to pop out. It seems like it may be a combination of things perhaps. I'm thinking along the lines of floats, positions (absolute, relative), and a splash of height %.

    Code:
    html, body {
    background-color: #ffffff;
    color: #000000;
    font-size: 12px; 
    font-family: Verdana, Arial, Helvetica, sans-serif;
    height: 100%;
    width: 100%;
    text-align: center;
    }
    
    * { 
    margin: 0px;
    padding: 0px;
    }
    
    a { 
    text-decoration: none;
    }
    
    a:link { 
    color: #ffffff;
    }
    
    a:visited { 
    color: #ffffff;
    }
    
    a:hover { 
    color: #fafab8;
    text-decoration: underline;	
    }
    
    a:active { color: #ebec12;
    text-decoration: underline overline;	   
    }
    
    #container { 
    background-color: #ffffff;
    min-height: 100%;
    top: auto;
    position: relative;
    text-align: left;
    width: 100%;
    }
    
    #content { 
    margin: 0px auto 0px auto;
    padding: 0px 0px 100px 0px;
    width: 100%;
    }
    
    #footer { 
    background-color: #ec8012 ;
    height: 30px;
    top: auto;
    position: absolute;
    bottom: 0px;
    text-align: center;
    width: 100%;
    border-top: 5px solid #bd0e0e ;
    padding-bottom: 5px;
    }
    
    #header { 
    background: #bd0e0e ;
    height: 100px;
    width: 100%;
    }
    
    #nav { 
    background-color: #ec8012 ;
    width: 100%;
    text-align: center;
    padding: 5px 0px 5px 0px
    }
    
    #nav li {
    display: inline;
    padding: 0px 15px 0px 15px;
    }
    
    #nav ul { 
    list-style-type: none;
    }
    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    
    <head>
    	<title>My Web Site</title>
    	<link rel="stylesheet" href="layout.css" type="text/css" />
    </head>
    
    <body>
    <div id="container">
    	<div id="header"><img src="cannery.jpg" alt="header image" width="798" height="117" />
    	</div>
    	
    	<div id="nav">
    		<ul>
    			<li><a href="index.html">Home</a></li>
    			<li><a href="display.html">Display</a></li>
    			<li><a href="about.html">About</a></li>
    			<li><a href="contact.html">Contact</a></li>
    		</ul>
    	</div>
    	
    	<div id="content">
    	</div>
    	
    	<div id="footer">
    		<p>
    		Copyright &copy; 2012 Censored name<br />
    		<a href="mailto:censored@gmail.com">censored@gmail.com</a>
    		</p>
    	</div>
    </div>
    </body>
    </html>

  • #14
    Regular Coder
    Join Date
    Mar 2011
    Posts
    213
    Thanks
    10
    Thanked 1 Time in 1 Post
    ..psh...div betta respect..

  • #15
    New Coder
    Join Date
    May 2012
    Location
    Oregon, USA
    Posts
    16
    Thanks
    1
    Thanked 1 Time in 1 Post
    Ah-ha!

    I just figured out why your text was being so defiant. For some reason I hadn't noticed that the black bars are part of the background image. I thought they were their own div tags. You'll have to break those off of the image and make them divs, at least the bottom one.

    (By the way, I have done other things today, promise! Your site has just been an interesting application for what I'm already trying to teach myself.)
    Last edited by aliqui; 05-26-2012 at 05:12 AM.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •