Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Junior Member
    Join Date
    Sep 2015
    Posts
    4
    Member #
    51978

    Short CSS question

    Hello Forum,

    I'm currently designing my own Homepage and i'm struggeling with some things.

    First of all, i made 2 navigation bars, which should stand on the left and on the right of my Banner.

    I have a problem with the exact positioning of these 2 navigation Bars.

    Here is my code with those 2 bars so far:

    HTML:
    Code:
    <body>
        <div id="container">
            
                <div id="top">
                    <a href="index.html"> <img id="banner" src="Bilder/Logo.png" /> </a>
                    
                    <ul id="links">
                        <li><a href="index.html">Home<span class="indicator"><i class="fa fa-angle-right"></i></span></a></li>
                        <li><a href="recension.html">About<span class="indicator"><i class="fa fa-angle-right"></i></span></a></li>
                    </ul>
                    
                    <ul id="rechts">
                        <li><a href="test.html">Service</a></li>
                        <li><a href="test2.html">Preis</a></li>
                    </ul>
                    
                </div>
            
            <div id="mid1">
                <img id="elementEingang" src="Bilder/ElementEingang.png" />
                
            </div>
            
            
            <div id="mid2">
                <img id="platzhalter" src="Bilder/platzhalterBild.png" />
                <img id="kreise" src="Bilder/kreise2.png" />
            </div>
            
            
            
            
            
            
            
        </div>
    CSS:
    Code:
    body {
        background-color: #b7babb;
    }
    
    #container {
        min-height: 100%;
        position: relative;
    }
    
    
    #top {
        position: fixed;
        width: 100%;
        background-color: #273133;
    
    }
    
    #banner {
        position: relative;
        height: 16%;
        width: 16%;
        margin-left: 42%; /* nochmal halbiert von den übrigen 84% eingeben, damit es mittig ist */
        margin-top: 10px;
        margin-bottom: 5px; 
    }
    
    #links {
        float: left;
        list-style: none;  /* wir brauchen eine liste um sie hier in CSS anzusprechen, aber wollen sie nicht so dargestellt haben*/
        padding: 0px 0px 0px 0px;
        margin-left:0;
        margin-right:0;
        margin-bottom:0;
        margin-top:5px;
    }
    
    #links li {
        float: left;
        border-right: solid 0px #ffffff;  
        height: 20px;  
    }
    
    #links li a:link, #links li a:visited {     /*a:link sagt wie Links aussehen; a:visited sagt wie links nach klick aussehen*/
        text-decoration: none;  
        display: block;  
        height: 40px;  
        color: #ffffff;  
        line-height: 40px;  
        padding: 0 9px 0 9px;  
        font-family: Tahoma,Arial,Helvetica,sans-serif;  
        font-size: 12px;  
    }
    
    #links li a:hover {  
        background: #a4a4a1;  
        color: #ffffff;  
    }
    
    
    #links li.first {  
        border-left: solid 0px #aeadad; 
        border-right: solid 0px #aeadad; 
        
    }
    
    
    #links li.last {  
        border-left: solid 0px #aeadad; 
        border-right: solid 0px #aeadad; 
        background: #4b4b4a;
        
    }
    
    #rechts {
        float: right;
        list-style: none;  /* wir brauchen eine liste um sie hier in CSS anzusprechen, aber wollen sie nicht so dargestellt haben*/
        padding: 0px 0px 0px 0px;
        margin-left:0;
        margin-right:0;
        margin-bottom:0;
        margin-top:5px;
    }
    
    #rechts li {  
        float: left;  
        border-right: solid 0px #ffffff;  
        height: 20px;  
    }
    
    #rechts li a:link, #rechts li a:visited {     /*a:link sagt wie Links aussehen; a:visited sagt wie links nach klick aussehen*/
        text-decoration: none;  
        display: block;  
        height: 40px;  
        color: #ffffff;  
        line-height: 40px;  
        padding: 0 9px 0 9px;  
        font-family: Tahoma,Arial,Helvetica,sans-serif;  
        font-size: 12px;  
    }
    
    #rechts li a:hover {  
        background: #a4a4a1;  
        color: #ffffff;  
    }
    
    
    #rechts li.first {  
        border-left: solid 0px #aeadad; 
        border-right: solid 0px #aeadad; 
        
    }
    
    
    #links li.last {  
        border-left: solid 0px #aeadad; 
        border-right: solid 0px #aeadad; 
        background: #4b4b4a;
        
    }

    Also i tried to make the "top" as a fixed bar. If i give the DIV "top" - position: fixed - it kinda overlays my "mid1"... how do i avoid that?

    My plan is to make an endless page....


    I hope it is not too much to ask for and that someone can help me with it .


    Greetings genkidama

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    What do you want them to look like?
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Junior Member
    Join Date
    Sep 2015
    Posts
    4
    Member #
    51978
    Quote Originally Posted by Ronald Roe View Post
    What do you want them to look like?
    I gave it a padding top now, and it worked fine. Also the positioning of my navigation was okay.

    But i have a new question.

    I have an IMG where i want to put text onto.... All of this stuff should be responsive, what means, that i only use % and not Pixels....

    When i use <img ......> and try to add Text afterwards, i struggle to center the text.


    Now i just made a new Div with <h1> and <h2> and <p> tags, and tried to put the Image as background of the div. The Background Image is not in its original proportion.... Do you have a solutionf or that?

    Here the Code:

    HTML Code:
            <div class="mid2">
                <div id="test">
                    <h1 id="ueberschrift">WIR SCHAFFEN NEUES</h1>
                    <p>&#9899</p>
                    <p>&#9899</p>
                    <p>&#9899</p>
                    <h2 id="erklaerung"> Fusion ist die Kollaboration zweier junger Menschen mit Vision und Unternehmergeist. Wir stehen für </br>
                    maßgeschneiderte Web-Solutions, die begeistern.</h2>
                </div>
                <img id="kreise" src="Bilder/kreise2.png" />
            </div>
    CSS:

    Code:
    #test {
        height: 100%;
        width: 100%;
        text-align: center;
        padding-top: 1%;
        padding-bottom: 8%;
        background: url(Bilder/aboutus.png);
        background-repeat: no-repeat;
        
    }

  5. #4
    Senior Member brandMatt's Avatar
    Join Date
    Oct 2015
    Location
    St .Catharines Ontario
    Posts
    240
    Member #
    52164
    Liked
    51 times
    To answer your question about image proportion, just add 'background-size:cover', that should get you on the right track.
    As for making an 'endless page', what exactly are you referring to? Endless pagination?

  6. #5
    Junior Member
    Join Date
    May 2015
    Posts
    27
    Member #
    49999
    give img name as like following
    background: url(...Bilder/aboutus.png);

  7. #6
    Senior Member brandMatt's Avatar
    Join Date
    Oct 2015
    Location
    St .Catharines Ontario
    Posts
    240
    Member #
    52164
    Liked
    51 times

    what

    Quote Originally Posted by ramarjun View Post
    give img name as like following
    background: url(...Bilder/aboutus.png);

    Maybe I am missing something, but this code does not help in anyway. The OP clearly already has the image showing up, that would tell me he/she has no problem with the image URL. They already have a very similar line of code posted. Furthermore this does not address their issue of the background image's size or position.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:21 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com