SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 41 of 41
  1. #26
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    It's very hard to follow what's going in this thread but is sounds to me as though you want a fixed positioned header from this comment:

    I was that bar to stay on the top of the screen at all times and it to maintain that property of stretching across the screen and staying at the top upon resizing the window no matter what.
    To create a repeating image all the way across the window is done by using one element and just repeating the image all the way across; its as simple as that. If you then want a centred section on that full width bar you just nest an inner element width the width you require and use auto margins to center it. I'm not sure if that's what you require though as I got lost in the thread

    It might be easier if you could do a rough drawing of what you want if Ron's examples don't match your requirements.

  2. #27
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey man

    Kind of but I need something above the header actually you can call it my navigation bar. And yes fixed to top of screen spanning whole width
    Sent from my GT-I9500 using Tapatalk 2

  3. #28
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by djCurzed View Post
    Hey man

    Kind of but I need something above the header actually you can call it my navigation bar. And yes fixed to top of screen spanning whole width
    That shouldn't be an issue as such as its the same technique no matter what comes first. You'd just do the nav and then do the wide element underneath or indeed as a repeating image on the bottom of the nav container (or wherever it needs to be). You will need to remove your widths from the body as in your very first example and use inner html elements instead.

    It seems that its one of those questions where we need to see a live version (or mock up) of what you have got so far and then we can say "Oh yeah - do it like this"

    If you don't have a live site the posting basics thread gives you some ideas of how you can post your code if you have no live version in order that we can get something up and running so we can debug properly.

    I think Ron has more idea of what you might want as he has been involved in the thread from the start but I am still having a hard time visualising what you want and how to offer something useful for you to work with.

  4. #29
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,579
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    djCurzed,

    Did you copy the code that I posted in post #22 to an html file and open it in your brower? If not, please do that exactly as it is written and tell us if that is on the right track or not.

    As requested twice before, posting a mockup or photoshop drawing of your intended page design would be the most helpful thing you could offer at this point because your descriptions are difficult to follow.

  5. #30
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by djCurzed View Post
    ok so what you are saying is that i should rather change the tags to image tags and not div tags for the left_bar , middle_bar, right_bar?? Cause i dont want text boxes there and thats what im assuming you mean when you say get rid of the foreground images. Why do i want one repeating image if im going to have drop down animation there??
    Dont i need seperate bars so that i can assign the dropdown text to one of them???
    Yes i copied and pasted. its not the layout i was looking for. I did what you said and extended the wrapper 90% ofcourse had to readjust some of the content, but now i cant get the footer to the center and still a problem with that nav bar,,,,,here is a small mock up.

    ibka.jpg

    thats more or less the basic structure hope its understandabe...will put the code up again tomorrow. I have a feeliing its the size of the actual jpeg images.

  6. #31
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,579
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Let me be sure I understand what you did.... Did you

    (1) Copy the code into an a new file, give that file a suffix of .htm (or .html) and open it in you browser without making any changes?

    (2) Copy portions of the code into YOUR code and try to make it work with your code?



    The sketch is helpful. I sounds like you want a fixed position header at the top of the window whose left and right boxes are fluid except that the right box might need a min-width.

    (1) Can you give the height and/or width dimensions in px of any of the fixed boxes?

    (2) Can you post or link to the images that you wish to use on the page? Not screen shots... the actual images.


    I am assuming that your code does not yet reside on a server. When it does, that will be a giant leap.

  7. #32
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    In order to help I've put a starting page up here so that you can tell us whether any aspects are correct or not. I assumed you just wanted a repeating strip at the top and not proper elements.

  8. #33
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,579
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by djCurzed View Post
    ok so what you are saying is that i should rather change the tags to image tags and not div tags for the left_bar , middle_bar, right_bar?? Cause i dont want text boxes there and thats what im assuming you mean when you say get rid of the foreground images.
    No, that's not what I am saying. The <div> tags should stay. They can "contain" the text, fixed background images or animation. They allow you to set unique widths for each container: left - fluid, middle - fixed, right - fluid with a minimum width. The images should probably be assigned as background images in CSS rather than foreground images in HTML.

    As I have said several times, you descriptions aren't very clear, but they ARE getting better.

    Quote Originally Posted by djCurzed View Post
    Why do i want one repeating image if im going to have drop down animation there??
    You probably don't. However a single repeating background image across the row will be hidden by foreground images, etc., so, unless it is distracting is some way (as yet unknown) it is an efficient method of applying a consistent background across the row.

    Quote Originally Posted by djCurzed View Post
    Dont i need seperate bars so that i can assign the dropdown text to one of them???
    According to your description, you need separate BOXES, not necessarily bars. The words box and bar are not synonymous.

  9. #34
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,579
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    djCurzed,

    Please look at this image and tell us if the top_bar looks the way you want it to. The blue-green lines mark the edges of the boxes. The middle box is 192px wide per your image. The row is 80px high. The left and right boxes extend to the edge of the window, however wide that may be.

    https://www.dropbox.com/s/kmis0zfpmzv88e6/djCurzed1.gif

    (1) What should the menu in .middle_box look like? What should it say?

    (2) Should there be text or buttons in .right_box? If so, what should they say?

    Below the .top_bar...

    (3) .wrapper is set at 90% of the width of the browser window which you said you did not like. What would you like? If a fixed width, how wide should it be?

    (4) What should be in the box .header_main? header.png? Right now, it's an empty box with a height of 150px. Do you have an image you can post?

    Your turn

  10. #35
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    djCurzed,

    Please look at this image and tell us if the top_bar looks the way you want it to. The blue-green lines mark the edges of the boxes. The middle box is 192px wide per your image. The row is 80px high. The left and right boxes extend to the edge of the window, however wide that may be.

    https://www.dropbox.com/s/kmis0zfpmzv88e6/djCurzed1.gif

    (1) What should the menu in .middle_box look like? What should it say?

    (2) Should there be text or buttons in .right_box? If so, what should they say?

    Below the .top_bar...

    (3) .wrapper is set at 90% of the width of the browser window which you said you did not like. What would you like? If a fixed width, how wide should it be?

    (4) What should be in the box .header_main? header.png? Right now, it's an empty box with a height of 150px. Do you have an image you can post?

    Your turn
    Hey man really appreciate.

    That image is exactly what im looking for. I fiddled with your code but it still shows background color of pink as you made it, when you extend the window.The image is now on the left end and it stays there but as i said before when you extend it, instead of it extending the bar, it shows the pink background. It also places the images underneath eachother when i make the window smaller that the bar itself. I need it to be fixed so that it scrolls with the page.As in as you scroll down the page, it moves with the top of the window.

    its needs to be 100% wrapper as i need it to be full across the page and it isnt when i make the wrapper 90%.

    There is no text in the left box or the right box and the middle box is going to be a drop down menu that i will manually create.

    Dont worry about the header, i still need to design that.

    Really appreciate all your help guys.

  11. #36
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what paul did is kind of what im looking for except without all those menus it only displays MENU in the middle bar.

  12. #37
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,579
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by djCurzed View Post
    Its needs to be 100% wrapper as i need it to be full across the page and it isnt when i make the wrapper 90%.
    FYI: To make it a "100%" wrapper, simply delete (or comment out) width:90%. You do not need to specify width:100%. The default behavior of a <div> (or any block object) is width:100%. So you do not need to specify width:100%.

    The problem with the images is that you have placed them as foreground images in the HTML instead of using just one repeating background-image in CSS. In the page that is shown in the link, the menubar image is coded as a background image in .top_bar. There are no images in HTML.

    Paul's example shows a fixed top menubar that is always visible at the top of the window even when the rest of the page is scrolled. Is that the way you want it? Or do you want the menubar to scroll up with the rest of the page? In other words, do you want that menu bar to be attached to the top of the page and scroll out of sight when the page is scrolled, or do you want that menu bar to be attached to the top of the window and never move, even when the page is scrolled?

    On your computer, are your images in the same folder with the HTML file, or are then in a sub-folder, maybe one name images or something?

    Are you planning to design the drop-down menu, or do you want me to leave one of Paul's buttons as a guide?

  13. #38
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    FYI: To make it a "100%" wrapper, simply delete (or comment out) width:90%. You do not need to specify width:100%. The default behavior of a <div> (or any block object) is width:100%. So you do not need to specify width:100%.

    The problem with the images is that you have placed them as foreground images in the HTML instead of using just one repeating background-image in CSS. In the page that is shown in the link, the menubar image is coded as a background image in .top_bar. There are no images in HTML.

    Paul's example shows a fixed top menubar that is always visible at the top of the window even when the rest of the page is scrolled. Is that the way you want it? Or do you want the menubar to scroll up with the rest of the page? In other words, do you want that menu bar to be attached to the top of the page and scroll out of sight when the page is scrolled, or do you want that menu bar to be attached to the top of the window and never move, even when the page is scrolled?

    On your computer, are your images in the same folder with the HTML file, or are then in a sub-folder, maybe one name images or something?

    Are you planning to design the drop-down menu, or do you want me to leave one of Paul's buttons as a guide?
    Hey man,
    Thanks.

    Images are in same folder.
    It needs to be always visible.
    I want it exactly like pauls.
    I will be planning a drop down menu which will make, for instance, the whole of the middle bar look like it is pressed down and then a drop down menu comes underneath that.

    I have gotten it to stretch across the top using the background method.

    but now it is showing an extra space between the bar and the header.

    I still need the footer to be centered and its not doing that.

    New code below.

    HTML Code:
    <!DOCTYPE HTML>
    		<html xmlns="http://www.w3.org/1999/xhtml">
    
    	
    		<head>
    		
    		<meta charset="UTF-8">
    		<link href="general.css" rel="stylesheet" type="text/css">
    		<title>TEMP NAME</title>
    		
    		
    		</head>
    		
    	
    		
    		<body id="wrap">
    		<div class="top_bar">
    		<div class="left_bar">
    		</div>
    		<div class="middle_bar">
    		</div>
    		<div class="right_bar">
    		
    		</div> 
    		</div>
    		
    		
    		
    		
    		
    			
    		<div class="whole">
    		<div class="header_main">
    		<img src="header.png" alt="header"></img>
    		</div>
    		<div class="window">
    		
    		
    		<video class="vid1" width="130" height="400" loop onMouseOver="this.play();" onMouseOut="this.pause();">
    		<source src="movie1.mp4" type='video/mp4'>
    		</video>
    		
    		
    		
    		<video class="vid1" width="130" height="400" loop onMouseOver="this.play();" onMouseOut="this.pause();">
    		<source src="movie2.mp4" type='video/mp4'>
    		</video>
    		
    		
    		
    		<video class="vid1" width="130" height="400" loop onMouseOver="this.play();" onMouseOut="this.pause();">
    		<source src="movie3.mp4" type='video/mp4'>
    		</video>
    		
    		
    		
    		<video class="vid1" width="130" height="400" loop onMouseOver="this.play();" onMouseOut="this.pause();">
    		<source src="movie4.mp4" type='video/mp4'>
    		</video>
    		
    		
    		<video class="vid1" width="130" height="400" loop onMouseOver="this.play();" onMouseOut="this.pause();">
    		<source src="movie5.mp4" type="video/mp4">
    		</source>
    		</video>
    		
    		</div>
    		
    
    
    		<p class="content">
    		asdsadadsfafasdf
    		
    		</p>
    		<p class="content">
    		asdsadadsfafasdf
    		
    		</p>
    		<p class="content">
    		asdsadadsfafasdf
    		
    		</p>
    		<p class="content">
    		asdsadadsfafasdf
    		
    		</p>
    		<p class="content">
    		asdsadadsfafasdf
    		
    		</p>
    		<p class="content">
    		asdsadadsfafasdf
    		
    		</p>
    		<p class="content">
    		asdsadadsfafasdf
    		
    		</p>
    		
    		
    		
    		
    		</div>
    		<div class="footer">
    		<img src="footer.png" alt="Footer"></img>
    		</div>
    		
    		
    		</body>
    				
    		</html>

    Code:
    #wrap{ 
    	/* width: 100%; */
    	margin: auto; 
    	min-height: 100%;
    	height: auto !important;
    	height: 100%;
    	margin: 0 auto;
    	background:url(blue.png);
    	background-size: cover;
    
    	
    	
    	
    	
    }
    #bg{
      width: 100%;
      height:100%;
      min-width:1000px;
      min-height: 750px;
      position: absolute;
      top: 0;
      left: 0;
    }
    
    
    div.header_main{
    
    	position:relative;
    	text-align : center;
    	width: 964px;
    	min-width:964x;
    	max-width:964px;
    	height: 150px;
    	margin-left:auto;
    	margin-right:auto;
    	
    
    }
    
    div.top_bar{
    	
      	/* width: 100%;
    	max-width: 100%;
    	min-width: 100%;
    	position:relative;
    	display : block;
    	float:left;
    	height:80px; */
    	outline:1px solid green;    /* TEST OUTLINE */
        background-color:pink;      /* TEST COLOR */
        padding:0 97px;    /* padding = 1/2 width of middle box */
        margin:0;
        overflow:hidden;
    	background:url("left_bar.png");
    	
    	
    
    
    
    }
    div.left_bar{
    
    	
    	display : block;
    	position:relative;
    	width: 385.6px;
    	min-width:386px;
    	height : 80px;
    	float: left;
    	
    	margin-left:-97px;
    	
    	
    	
    }
    div.middle_bar{
    
    	
    	display : block;
    	position:relative;
    	width: 192px;
    	min-width:192px;
    	max-width:192px;
    	height : 80px;
    	float : left;
    	
    
    }
    div.right_bar{
    
    	
    	display : block;
    	position:relative;
    	width: 386px;
    	min-width:386px;
    	height : 80px;
    	float : left;
    	
    	margin-right:-97px;
    	
    	
    }
    /* div.left_panel{
    	
    	
    	display : block;
    	float : left;
    	position: relative;
    	width:44px;
    	height:600px;
    	
    	
    	
    }
    div.right_panel{
    	
    	display : block;
    	float : right;
    	position: relative;
    	width:44px;
    	height:600px;
    	
    	
    } */
    div.window
    {
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
    	width: 680px;
    	min-width:680px;
    	max-width:680px;
    	height:400px;
    	background-image:url('white.png');
    	background-size : 100% 100%;
    	
    }
    video
    {
    	margin-top:30px;
    	border-style:outset;
    	width: 130px;
    	height:400px;
    	float:left;
    	position :relative;
    	margin-bottom : 40px;
    
    }
    
    
    p.content
    {
    	display : block;
    	width: 964px;
    	min-width:964px;
    	max-width:964px;
    	text-align: center;
    	
    	
    	
    }
    div.whole{
    	background-image:url('white.png');
    	background-size : 100% 100%;
    	opacity:0.9;
    	margin-top:80px;
    	width: 964px;
    	min-width:964px;
    	max-width:964px;
    	margin-left:auto;
    	margin-right:auto;
    
    
    }
    div.footer{
       
    position:fixed;
    bottom:0px;
    height : 80px;
    margin-left:auto;
    margin-right:auto;
    width: 964px;
    min-width:964px;
    max-width:964px;
    text-align : center;
    
    
    
    
    }
    iframe.test{
    
    
    display: block;
    border:0;
    margin: 0 auto;
    overflow: hidden;
    width : 100%;
    height :900px;
    max-width : 900px;
    position: relative;
    
    
    }

  14. #39
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,579
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    To make the footer center instead of extending to the full width of the page:
    Code:
        </div>    /* move this close div */
        <div class="footer">
            <img src="footer.png" alt="Footer"></img>
        </div>
    </div>    /* down here */
    </body>
    </html>
    It's almost 5am my time and I need to get some sleep. I'll be back later today.

  15. #40
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Lol have you guys given up on me hehe still can't get it right... Used the background method so it fills the top... But like it doesn't scroll with the page and when I set position to fixed it moves the bar down a bit and behind the content.

    Sent from my GT-I9500 using Tapatalk 2

  16. #41
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey guys nvm figured it out thanks for all your help:thumbup:

    Sent from my GT-I9500 using Tapatalk 2


Bookmarks

Posting Permissions

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