[gesloten] Probleem HTML CSS ~ Freek

derpforum › Algemeen › Vragen › Probleem HTML CSS ~ Freek

Dit topic is gesloten door: Freek
Reden: Syntex heeft me geholpen. Had te veel div'jes.

Freek
Quote

Melkman is koning

Offline

VIP -69

posts	liefde
778	-1

+1 biglitttle

ongeveer 8 jaar geleden

Hey Derpers,

Ik ben bezig met een site te maken voor een opdracht voor school. Alleen ik zit nu met het probleem dat 1 onderdeel naar onderen wordt geduwd "Login, Registreer, Winkelmandje" dit wil ik gewoon op 1 lijn met de rest maar dan helemaal naar rechts met een margin-right van 15px.

HTML CODE

<!DOCTYPE HTML>
<html>
    <head>
        <title></title>
        <meta charset='utf-8'>
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <div id='wrapper'> <!-- Begin Wrapper -->
            
            <div id='navigatie'> <!-- Begin Navigatie -->
                
                <div id='nav-top-left'> <!-- Begin Nav-Top-Left -->
                    <h2>Thee Idee</h2>
                </div>  <!-- Einde Nav-Top-Left -->
                
                <div id='nav-top-mid'>  <!-- Begin Nav-Top-Mid -->
                    <ul>
                        <li><a class='active' href='#'>Home</a></li><li>
                        <a href='#'>Theezakjes</a></li><li>
                        <a href='#'>Theekopjes</a></li><li>
                        <a href='#'>Theepotten</a></li><li>
                        <a href='#'>Contact</a></li>
                    </ul>
                    
                    <ul class='nav-top-right'>
                        <li><a href='#'>Login</a></li><li>
                        <a href='#'>Registreer</a></li><li>
                        <a href='#'>Winkelmandje</a></li><li>
                    </ul>
                </div> <!-- Einde Nav-Top-Mid -->
                
            </div> <!-- Einde Navigatie -->
            
        </div> <!-- Einde Wrapper -->
    </body>
</html>

CSS

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

body{
  background-image: url("http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/upfeathers.png");
  font-family: Arial, Helvetica, sans-serif;
}


/*****************/
/* Navigatie     */
/*****************/


#navigatie{
  width: 100%;
  height: 45px;
  background-color:#27ae60;
  border-bottom:2px solid #1d623b;
}


/*****************/
/* Top Left Nav  */
/*****************/


#nav-top-left{
 margin-left: 15px;
 padding-top: 8px;
 position: relative;
 float: left;
 display: inline-block;
}


/*****************/
/* Top Mid Nav   */
/*****************/


#nav-top-mid{
  margin-left: 130px
}

#nav-top-mid ul{
 display: inline-block;
}

#nav-top-mid ul li{
  display: inline-block;
  width: auto;
  height: 45px;
}

#nav-top-mid ul li a{
  display: block;
  padding: 13px 25px; 0px; 0px;
  text-decoration: none;
  color: white; 
  font-weight: bold; 
  text-shadow: 0 -1px rgba(0,0,0,0.3);

}

#nav-top-mid ul li:hover{
  transition: 0.5s;
  background-color: #1c7d45;
}

.nav-top-right{
  float: right;
  margin-right: 15px;
}

Ik hoop dat jullie mij kunnen helpen

Laatst bewerkt: 02-12-15 22:15 door: Freek

Xoyia
Quote

Xoyia

Melkman is koning

Offline

VIP -69

posts	liefde
15240	-1

ongeveer 8 jaar geleden

.nav-top-right{
float: left;
margin-left: 100px;
}

Gekkerdje
Quote

Gekkerdje

Melkman is koning

Offline

VIP -69

posts	liefde
5704	0

ongeveer 8 jaar geleden

Dan moet je gebruikmaken van float:right; en float:left;

@xoyia bedoeld float:right;
zet dan wel aan de andere kant float:left; want anders kan het buggen.

Laatst bewerkt: 02-12-15 22:21 door: Gekkerdje

Freek
Quote

Freek

Melkman is koning

Offline

VIP -69

posts	liefde
778	-1

ongeveer 8 jaar geleden

Ik heb geprobeerd ze nu weer allebei in een aparte div te doen en de ene float lef andere right. Nu komt er dit uit:

Dit is nu de code.

HTML

<!DOCTYPE HTML>
<html>
    <head>
        <title></title>
        <meta charset='utf-8'>
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <div id='wrapper'> <!-- Begin Wrapper -->
             
            <div id='navigatie'> <!-- Begin Navigatie -->
                 
                <div id='nav-top-left'> <!-- Begin Nav-Top-Left -->
                    <h2>Thee Idee</h2>
                </div>  <!-- Einde Nav-Top-Left -->
                 
                <div id='nav-top-mid'>  <!-- Begin Nav-Top-Mid -->
                    <ul>
                        <li><a class='active' href='#'>Home</a></li><li>
                        <a href='#'>Theezakjes</a></li><li>
                        <a href='#'>Theekopjes</a></li><li>
                        <a href='#'>Theepotten</a></li><li>
                        <a href='#'>Contact</a></li>
                    </ul>
                     
                    <ul class='nav-top-right'>
                        <li><a href='#'>Login</a></li><li>
                        <a href='#'>Registreer</a></li><li>
                        <a href='#'>Winkelmandje</a></li><li>
                    </ul>
                </div> <!-- Einde Nav-Top-Mid -->
                
                <div id='nav-top-right'>
                    
                    <ul>
                        <li><a href='#'>Login</a></li><li>
                        <a href='#'>Registreer</a></li><li>
                        <a href='#'>Winkelmandje</a></li><li>
                    </ul>  
                    
                </div>
            </div> <!-- Einde Navigatie -->
             
        </div> <!-- Einde Wrapper -->
    </body>
</html>

CSS

* {
  padding: 0px;
  margin:0px;
}
 
body{
  background-image: url("http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/upfeathers.png");
  font-family: Arial, Helvetica, sans-serif;
}
 
 
/*****************/
/* Navigatie     */
/*****************/
 
 
#navigatie{
  width: 100%;
  height: 45px;
  background-color:#27ae60;
  border-bottom:2px solid #1d623b;
}
 
 
/*****************/
/* Top Left Nav  */
/*****************/
 
 
#nav-top-left{
 margin-left: 15px;
 padding-top: 8px;
 position: relative;
 float: left;
 display: inline-block;
}
 
 
/*****************/
/* Top Mid Nav   */
/*****************/
 
 
#nav-top-mid{
  margin-left: 130px
  float: left;
}
 
#nav-top-mid ul{
 display: inline-block;
}
 
#nav-top-mid ul li{
  display: inline-block;
  width: auto;
  height: 45px;
}
 
#nav-top-mid ul li a{
  display: block;
  padding: 13px 25px; 0px; 0px;
  text-decoration: none;
  color: white; 
  font-weight: bold; 
  text-shadow: 0 -1px rgba(0,0,0,0.3);
 
}
 
#nav-top-mid ul li:hover{
  transition: 0.5s;
  background-color: #1c7d45;
}
 
#nav-top-left{
 margin-left: 15px;
 padding-top: 8px;
 position: relative;
 float: left;
 display: inline-block;
}
 
 
/*****************/
/* Top Right Nav   */
/*****************/
 
 
#nav-top-right{
  float: right;
}
 
#nav-top-right ul{
 display: inline-block;
}
 
#nav-top-right ul li{
  display: inline-block;
  width: auto;
  height: 45px;
}
 
#nav-top-right ul li a{
  display: block;
  padding: 13px 25px; 0px; 0px;
  text-decoration: none;
  color: white; 
  font-weight: bold; 
  text-shadow: 0 -1px rgba(0,0,0,0.3);
 
}
 
#nav-top-right ul li:hover{
  transition: 0.5s;
  background-color: #1c7d45;
}

Laatst bewerkt: 02-12-15 22:28 door: Freek

Gekkerdje
Quote

Gekkerdje

Melkman is koning

Offline

VIP -69

posts	liefde
5704	0

ongeveer 8 jaar geleden

Aparte div moet je niet doen is niet nodig gewoon in de:
.nav-top-right{ float:right; }
en in .nav-top-left{ float:left; }

Xoyia
Quote

Xoyia

Melkman is koning

Offline

VIP -69

posts	liefde
15240	-1

ongeveer 8 jaar geleden

Kijk je kan niet
float left en right zomaar doen op 1 regel.

Wil je dat wel doen dan doe je
<wrapper>
<left>links</left>
<right>Rechts</right>
</wrapper>

En de css voor wrapper zal dan zijn:
margin:0 auto;

En moet je links en rechts een width mee geven.

Ik weet dit is maar een schets maar als je wat html kennis hebt moet je er uit kunnen komen met dit.

Freek
Quote

Freek

Melkman is koning

Offline

VIP -69

posts	liefde
778	-1

ongeveer 8 jaar geleden

Nu heb ik het in 1 div met aparte ul's en daar voor een class links en rechts.

CODES

HTML

<!DOCTYPE HTML>
<html>
    <head>
        <title></title>
        <meta charset='utf-8'>
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <div id='wrapper'> <!-- Begin Wrapper -->
             
            <div id='navigatie'> <!-- Begin Navigatie -->
                 
                <div id='nav-top-left'> <!-- Begin Nav-Top-Left -->
                    <h2>Thee Idee</h2>
                </div>  <!-- Einde Nav-Top-Left -->
                 
                <div id='nav-top-mid'>  <!-- Begin Nav-Top-Mid -->
                    <ul class='nav-top-left'>
                        <li><a class='active' href='#'>Home</a></li><li>
                        <a href='#'>Theezakjes</a></li><li>
                        <a href='#'>Theekopjes</a></li><li>
                        <a href='#'>Theepotten</a></li><li>
                        <a href='#'>Contact</a></li>
                    </ul>
                    
                    <ul class='nav-top-right'>
                        <li><a href='#'>Login</a></li><li>
                        <a href='#'>Registreer</a></li><li>
                        <a href='#'>Winkelmandje</a></li><li>
                    </ul>

                </div> <!-- Einde Nav-Top-Mid -->

            </div> <!-- Einde Navigatie -->
             
        </div> <!-- Einde Wrapper -->
    </body>
</html>

CSS

* {
  padding: 0px;
  margin:0px;
}
 
body{
  background-image: url("http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/upfeathers.png");
  font-family: Arial, Helvetica, sans-serif;
}
 
 
/*****************/
/* Navigatie     */
/*****************/
 
 
#navigatie{
  width: 100%;
  height: 45px;
  background-color:#27ae60;
  border-bottom:2px solid #1d623b;
}
 
 
/*****************/
/* Top Left Nav  */
/*****************/
 
 
#nav-top-left{
 margin-left: 15px;
 padding-top: 8px;
 position: relative;
 float: left;
 display: inline-block;
}
 
 
/*****************/
/* Top Mid Nav   */
/*****************/
 
 
#nav-top-mid{
  margin-left: 130px
  float: left;
}
 
#nav-top-mid ul{
 display: inline-block;
}
 
#nav-top-mid ul li{
  display: inline-block;
  width: auto;
  height: 45px;
}
 
#nav-top-mid ul li a{
  display: block;
  padding: 13px 25px 0px 25px;
  text-decoration: none;
  color: white; 
  font-weight: bold; 
  text-shadow: 0 -1px rgba(0,0,0,0.3);
 
}
 
#nav-top-mid ul li:hover{
  transition: 0.5s;
  background-color: #1c7d45;
}

.nav-top-left{
  float: left;
}

.nav-top-right{
  float: right;
}

Gekkerdje
Quote

Gekkerdje

Melkman is koning

Offline

VIP -69

posts	liefde
5704	0

ongeveer 8 jaar geleden

Quote: Freek
Nu heb ik het in 1 div met aparte ul's en daar voor een class links en rechts.

[img]

CODES

HTML

<!DOCTYPE HTML>
<html>
    <head>
        <title></title>
        <meta charset='utf-8'>
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <div id='wrapper'> <!-- Begin Wrapper -->
             
            <div id='navigatie'> <!-- Begin Navigatie -->
                 
                <div id='nav-top-left'> <!-- Begin Nav-Top-Left -->
                    <h2>Thee Idee</h2>
                </div>  <!-- Einde Nav-Top-Left -->
                 
                <div id='nav-top-mid'>  <!-- Begin Nav-Top-Mid -->
                    <ul class='nav-top-left'>
                        <li><a class='active' href='#'>Home</a></li><li>
                        <a href='#'>Theezakjes</a></li><li>
                        <a href='#'>Theekopjes</a></li><li>
                        <a href='#'>Theepotten</a></li><li>
                        <a href='#'>Contact</a></li>
                    </ul>
                    
                    <ul class='nav-top-right'>
                        <li><a href='#'>Login</a></li><li>
                        <a href='#'>Registreer</a></li><li>
                        <a href='#'>Winkelmandje</a></li><li>
                    </ul>

                </div> <!-- Einde Nav-Top-Mid -->

            </div> <!-- Einde Navigatie -->
             
        </div> <!-- Einde Wrapper -->
    </body>
</html>

CSS

* {
  padding: 0px;
  margin:0px;
}
 
body{
  background-image: url("http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/upfeathers.png");
  font-family: Arial, Helvetica, sans-serif;
}
 
 
/*****************/
/* Navigatie     */
/*****************/
 
 
#navigatie{
  width: 100%;
  height: 45px;
  background-color:#27ae60;
  border-bottom:2px solid #1d623b;
}
 
 
/*****************/
/* Top Left Nav  */
/*****************/
 
 
#nav-top-left{
 margin-left: 15px;
 padding-top: 8px;
 position: relative;
 float: left;
 display: inline-block;
}
 
 
/*****************/
/* Top Mid Nav   */
/*****************/
 
 
#nav-top-mid{
  margin-left: 130px
  float: left;
}
 
#nav-top-mid ul{
 display: inline-block;
}
 
#nav-top-mid ul li{
  display: inline-block;
  width: auto;
  height: 45px;
}
 
#nav-top-mid ul li a{
  display: block;
  padding: 13px 25px 0px 25px;
  text-decoration: none;
  color: white; 
  font-weight: bold; 
  text-shadow: 0 -1px rgba(0,0,0,0.3);
 
}
 
#nav-top-mid ul li:hover{
  transition: 0.5s;
  background-color: #1c7d45;
}

.nav-top-left{
  float: left;
}

.nav-top-right{
  float: right;
}

wacht ff ik plak ff je code en ik fix ut wel ff

Gekkerdje
Quote

Gekkerdje

Melkman is koning

Offline

VIP -69

posts	liefde
5704	0

+2 Gekkerdje

ongeveer 8 jaar geleden

CSS:

* {
  padding: 0px;
  margin:0px;
}
  
body{
  background-image: url("http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/upfeathers.png");
  font-family: Arial, Helvetica, sans-serif;
}
  
  
/*****************/
/* Navigatie     */
/*****************/
  
  
#navigatie{
  width: 100%;
  height: 45px;
  background-color:#27ae60;
  border-bottom:2px solid #1d623b;
}
  
  
/*****************/
/* Top Left Nav  */
/*****************/
  
  
#nav-top-left{
 margin-left: 15px;
 padding-top: 8px;
 position: relative;
 float: left;
 display: inline-block;
}
  
  
/*****************/
/* Top Nav   */
/*****************/
  
  
#nav-top{
  margin-left: 20px
}

#nav-top > h2{ 
	padding:0px;
	margin:6px;
	float:left;
}
  
#nav-top ul li{
  float:left;
  width: auto;
  height: 45px;
}
  
#nav-top ul li a{
  display: block;
  padding: 13px 25px 0px 25px;
  text-decoration: none;
  color: white; 
  font-weight: bold; 
  text-shadow: 0 -1px rgba(0,0,0,0.3);
  
}
  
#nav-top ul li:hover{
  transition: 0.5s;
  background-color: #1c7d45;
}
 
.nav-top-left{
  float: left;
  margin:0px;
}
 
.nav-top-right{
  float: right;
  margin:0px;
}

HTML:

<!DOCTYPE HTML>
<html>
    <head>
        <title></title>
        <meta charset='utf-8'>
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <div id='wrapper'> <!-- Begin Wrapper -->
              
            <div id='navigatie'> <!-- Begin Navigatie -->
                  
                <div id='nav-top'> <!-- Begin Nav-Top-Left -->
                    <h2>Thee Idee</h2>
					
                    <ul class='nav-top-left'>
                        <li><a class='active' href='#'>Home</a></li><li>
                        <a href='#'>Theezakjes</a></li><li>
                        <a href='#'>Theekopjes</a></li><li>
                        <a href='#'>Theepotten</a></li><li>
                        <a href='#'>Contact</a></li>
                    </ul>
                     
                    <ul class='nav-top-right'>
                        <li><a href='#'>Login</a></li><li>
                        <a href='#'>Registreer</a></li><li>
                        <a href='#'>Winkelmandje</a></li><li>
                    </ul>
 
                </div> <!-- Einde Nav-Top-Mid -->
 
            </div> <!-- Einde Navigatie -->
              
        </div> <!-- Einde Wrapper -->
    </body>
</html>

CHECK JE PM VOOR MN UITLEG
Wat ik veranderd heb en waarom

Laatst bewerkt: 02-12-15 22:48 door: Gekkerdje

Draity
Quote

Draity

Melkman is koning

Offline

VIP -69

posts	liefde
11487	-1

ongeveer 8 jaar geleden

Haal de height af van je #nav-top-mid ul li en doe je
#nav-top-mid ul li a
gelijkmaken, die padding dus ipv een 0 14 van gemaakt
padding: 13px 25px 14px 25px;

https://jsfiddle.net/oo5fL1vb/

<div id='wrapper'> <!-- Begin Wrapper -->

  <div id='navigatie'> <!-- Begin Navigatie -->

    <div id='nav-top-left'> <!-- Begin Nav-Top-Left -->
      <h2>Thee Idee</h2>
    </div>  <!-- Einde Nav-Top-Left -->

    <div id='nav-top-mid'>  <!-- Begin Nav-Top-Mid -->
      <ul class='nav-top-left'>
        <li><a class='active' href='#'>Home</a></li><li>
        <a href='#'>Theezakjes</a></li><li>
        <a href='#'>Theekopjes</a></li><li>
        <a href='#'>Theepotten</a></li><li>
        <a href='#'>Contact</a></li>
      </ul>

      <ul class='nav-top-right'>
        <li><a href='#'>Login</a></li><li>
        <a href='#'>Registreer</a></li><li>
        <a href='#'>Winkelmandje</a></li><li>
      </ul>

    </div> <!-- Einde Nav-Top-Mid -->

  </div> <!-- Einde Navigatie -->

</div> <!-- Einde Wrapper -->

* {
  padding: 0px;
  margin:0px;
}
  
body{
  background-image: url("http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/upfeathers.png");
  font-family: Arial, Helvetica, sans-serif;
}
  
  
/*****************/
/* Navigatie     */
/*****************/
  
  
#navigatie{
  width: 100%;
  height: 45px;
  background-color:#27ae60;
  border-bottom:2px solid #1d623b;
}
  
  
/*****************/
/* Top Left Nav  */
/*****************/
  
  
#nav-top-left{
 margin-left: 15px;
 padding-top: 8px;
 position: relative;
 float: left;
 display: inline-block;
}
  
  
/*****************/
/* Top Mid Nav   */
/*****************/
  
  
#nav-top-mid{
  margin-left: 130px
  float: left;
}
  
#nav-top-mid ul{
 display: inline-block;
}
  
#nav-top-mid ul li{
  display: inline-block;
  width: auto;
}
  
#nav-top-mid ul li a{
  display: block;
  padding: 13px 25px 14px 25px;
  text-decoration: none;
  color: white; 
  font-weight: bold; 
  text-shadow: 0 -1px rgba(0,0,0,0.3);
  
}
  
#nav-top-mid ul li:hover{
  transition: 0.5s;
  background-color: #1c7d45;
}
 
.nav-top-left{
  float: left;
}
 
.nav-top-right{
  float: right;
}

Laatst bewerkt: 02-12-15 22:57 door: Draity

Aka xnochancex
Alle Game Bundle Site's!!!
TUT Chineese site's
TUT Invoeren artikelen
JACKASS Kanalen

rakkertjuhh1
Quote

rakkertjuhh1

Pannenkoek

Offline

VIP -69

posts	liefde
32346	0

ongeveer 8 jaar geleden

waarom maak je niet gebruik van een framework?

een heel stuk makkelijker

Je moet inloggen om te kunnen reageren.

Derp

Nieuwe topics

Actieve topics

[gesloten] Probleem HTML CSS ~ Freek

Freek
Quote

Xoyia
Quote

Gekkerdje
Quote

Freek
Quote

Gekkerdje
Quote

Xoyia
Quote

Freek
Quote

Gekkerdje
Quote

Gekkerdje
Quote

Draity
Quote

rakkertjuhh1
Quote

Statistieken

Derp

Nieuwe topics

Actieve topics

[gesloten] Probleem HTML CSS ~ Freek

Freek Quote

Xoyia Quote

Gekkerdje Quote

Freek Quote

Gekkerdje Quote

Xoyia Quote

Freek Quote

Gekkerdje Quote

Gekkerdje Quote

Draity Quote

rakkertjuhh1 Quote

Statistieken

Freek
Quote

Xoyia
Quote

Gekkerdje
Quote

Freek
Quote

Gekkerdje
Quote

Xoyia
Quote

Freek
Quote

Gekkerdje
Quote

Gekkerdje
Quote

Draity
Quote

rakkertjuhh1
Quote