Hjælp til kontakt side

Her kan du stille og svare på spørgsmål omkring HTML. Du kan altså med andre ord finde en masse hjælp til HTML og HTML5 på dette forum
Besvar
lynge1991
Begynder
Indlæg:4
Tilmeldt:16. jul 2018, 13:58
Hjælp til kontakt side

Indlæg af lynge1991 » 16. jul 2018, 14:01

Hej

Jeg er igang med at kode selve "kontakt siden" på min hjemmeside, men følgende volder mig problemer:

Jeg kan ikke få teksten til at bevæge sig under mine billeder når skærmen minimeres (altså når den ses på f.eks. en mobil). Jeg har prøvet alverdens løsninger uden held. Er der mulighed for hjælp? Hvis ja, så uploader jeg selve html og css koden

På forhånd tak

Brugeravatar
ronols
Entusiast
Entusiast
Indlæg:25
Tilmeldt:16. jun 2018, 08:26

Re: Hjælp til kontakt side

Indlæg af ronols » 16. jul 2018, 16:10

Er der mulighed for hjælp? Hvis ja, så uploader jeg selve html og css koden
muligheden er da størrer hvis vi kan se coden.

husk også at lave server validering, og gerne client side validering, og sikring mod bot's, inden den sender mails til dig, eller ligger beskeden i en database

lynge1991
Begynder
Indlæg:4
Tilmeldt:16. jul 2018, 13:58

Re: Hjælp til kontakt side

Indlæg af lynge1991 » 16. jul 2018, 16:19

Selve siden:

www.sivebæksportsmanagement.dk/Kontakt.html


Html:

Kode: Vælg alt

  <div class="col-md-7">

 <div>
  <img class="item" src="Img/Profile.png"/>
  <p class="caption">John Sivebæk</p>
  <p class="caption">Partner</p>
  <p class="caption">Navn@mail.dk</p>
  <p class="caption">11 22 33 44</p><br style="clear:both;" />   
 </div> 
    
  <div>
  <img class="item" src="Img/Profile.png"/>
  <p class="caption">John Sivebæk</p>
  <p class="caption">Partner</p>
  <p class="caption">Navn@mail.dk</p>
  <p class="caption">11 22 33 44</p><br style="clear:both;" />   
 </div> 

     <div>
  <img class="item" src="Img/Profile.png"/>
  <p class="caption">John Sivebæk</p>
  <p class="caption">Partner</p>
  <p class="caption">Navn@mail.dk</p>
  <p class="caption">11 22 33 44</p><br style="clear:both;" />   
 </div> 
    
    </div>

    <div class="col-md-5">

        <p class="firma" style="font-family: Arial Narrow; font-size:12pt;"> Sivebæk Sports Management ApS<br /> Andkærvej 26<br /> 7100 Vejle  <br /> CVR-nr: 20885971</p>

        <div id="map" style="width:340px; height:315px; margin-top: 30px;"></div>

        <script>
            function myMap() {
                var myCenter = new google.maps.LatLng(55.6744, 9.593213999999989);
                var mapCanvas = document.getElementById("map");
                var mapProp = { center: myCenter, zoom: 11 };
                var map = new google.maps.Map(mapCanvas, mapProp);
                var marker = new google.maps.Marker({ position: myCenter });
                marker.setMap(map);

                google.maps.event.addListener(marker, 'click', function () {
                    map.setZoom(18);
                    map.setCenter(marker.getPosition());
                });
            }
        </script>


        <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBr7EC3sUebiRIwt8uzkoMC820zdNCYbTA&callback=myMap"
                type="text/javascript"></script>
    </div>



CSS: 

body {
  position: relative;
  margin: 0;
  min-height: 950px;
}  
  
  .item {
	float:left;
    border-radius: 50%;   
}
    
@media (min-width: 320px) and (max-width: 799px) {
  
  .item {
    vertical-align: top;
    display: block;
    text-align:center;
}

	.caption {
    display: block;
}
  
    }
Senest rettet af Daniel 21. jul 2018, 11:38, rettet i alt 1 gang.
Begrundelse: Indsat code tags

jepperask
Geni
Geni
Indlæg:378
Tilmeldt:4. nov 2012, 17:57

Re: Hjælp til kontakt side

Indlæg af jepperask » 17. jul 2018, 21:06

Måske nedenstående er det du leder efter. Jeg har rykket lidt rundt på nogle af elementerne.

HTML:

Kode: Vælg alt

<html>
<head>  
  <title>Kontakt</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
  
<body>     
    <div class="wrapper">
        <nav>
			<div class="menu-icon">
				<i class="fa fa-bars fa-lg" style="margin-top:10px;"></i>
			</div>

			<div class="logo">
				<a href="/index.html">
					<img class="img-responsive" id="logo" src="/Img/Sivebaek.png" alt="Sivebæk logo"/>
				</a>
			</div>

			<div class="menu">
				<ul>
					<li><a href="/index.html">Forside</a></li>
					<li><a href="/Fodbold.html">Fodbold</a></li>
					<li><a href="/Esport.html">Esport</a></li>
					<li><a href="/Kontakt.html">Kontakt</a></li>
				</ul>
			</div>
        </nav>
	</div>
	<header>
		<div class="luft"></div>
	</header> 

  	<div class="no_width_container book-box text-center">
		<div class="row">
			<div class="col-md-6">
				<div class="row row-one">
					<div class="offset-md-2 col-md-4">
						<img class="item img-responsive" src="Img/Profile.png"/>
					</div>
					<div class="col-md-4">
						<div class="prov">
							<p>John Sivebæk</p>
							<p>Partner</p>
							<p>Navn@mail.dk</p>
							<p>+45 xx xx xx xx</p><br/> 
						</div>
					</div>
				</div>

				<div class="row row-one">
					<div class="offset-md-2 col-md-4">
						<img class="item img-responsive" src="Img/Profile.png"/>
					</div>
			
					<div class="col-md-4">
						<div class="prov">
							<p>Michael Møller Pedersen</p>
							<p>Agent</p>
							<p>Navn@mail.dk</p>
							<p>+45 xx xx xx xx</p><br/> 
						</div>
					</div>
				</div>
				<div class="row row-one">
					<div class="offset-md-2 col-md-4">
						<img class="item img-responsive" src="Img/Profile.png"/>
					</div>
			
					<div class="col-md-4">
						<div class="prov">
							<p>Søren Lynge Svendsen</p>
							<p>Agent</p>
							<p>Navn@mail.dk</p>
							<p>+45 xx xx xx xx</p><br/> 
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-6">
				<div class="firma col-md-12 col-sm-8 col-12">
					<p class="map-text"> Sivebæk Sports Management ApS<br /> Andkærvej 26<br /> 7100 Vejle  <br /> CVR-nr: 20885971</p>
					<div id="map" class="map_style"></div>
				</div>
			</div>
		</div>
	  </div>
	  
	<header>
		<div class="bund"></div>
	</header>   
  
	<div class="footer">
		<a href="https://www.facebook.com/scoutpocket/"><img class="social-logo" src="Img/facebook.png"/></a>
		<a href="https://www.facebook.com/scoutpocket/"><img class="social-logo" src="Img/instagram.png"/></a>
		<a href="https://www.facebook.com/scoutpocket/"><img class="social-logo" src="Img/linkedin.png"/></a>
	</div>  

	<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
	<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBr7EC3sUebiRIwt8uzkoMC820zdNCYbTA&callback=myMap" type="text/javascript"></script>
	<script type="text/javascript">
		// Menu-toggle button
		$(document).ready(function() {
			$(".menu-icon").on("click", function() {
					$("nav ul").toggleClass("showing");
			});
		});
	</script>
	<script>
		function myMap() {
			var myCenter = new google.maps.LatLng(55.6744, 9.593213999999989);
			var mapCanvas = document.getElementById("map");
			var mapProp = { center: myCenter, zoom: 11 };
			var map = new google.maps.Map(mapCanvas, mapProp);
			var marker = new google.maps.Marker({ position: myCenter });
			marker.setMap(map);

			google.maps.event.addListener(marker, 'click', function () {
				map.setZoom(18);
				map.setCenter(marker.getPosition());
			});
		}
	</script>
</body>
</html> 
CSS

Kode: Vælg alt

.row > div {
	display: block;
}

.row-one > div {
	display: table;
}

body {
	position: relative;
	margin: 0;
	min-height: 950px;
}  
	
.book-box {
	margin-top: 5px !important;
	margin-left: 30px;
}
  
#book-desc {
	margin-top: 20px !important;
	text-align: justify !important;
	text-justify: inter-word !important;
}
.row-one {
	display:flex;
	width:100%;
}
	
.logo img {
	position: fixed;
	float: left;
	height: 40px;
	width: 130px;
	margin-top:5px;
}

nav {
	position: fixed;
	width: 100%;
	z-index: 1;
}	
   
nav ul {
	line-height: 20px;
	list-style: none;
	background: white;
	border-bottom:1px solid #000;
	overflow: hidden;
	padding: 0;
	text-align: right;
	margin: 0;
	transition: 1s;
}
   
nav.black ul {
	background:white;
}

nav ul li {
	display: inline-block;
	padding: 14px 25px;
}

nav ul li a {
	text-decoration: none;
	color:black;
	font-weight: lighter;
	font-size: 12px;
	font-family: 'Open Sans', sans-serif;
	text-transform: uppercase;
}
   
.menu-icon {
	line-height: 60px;
	width: 100%;
	background:white;
	text-align: right;
	box-sizing: border-box;
	padding: 2px 20px;
	cursor: pointer;
	color: black;
	display: none;
}
   
.luft {
	height: 16vh;
}
	
.bund {
	height: 20vh;
}

.item {
	border-radius: 50%;   
}
	
.footer {
	position:relative;
	background-color:#214953;
	height:80px;
	width:100%;
	text-align:center;
}    
	
.social-logo {
	height:40px;
	margin-top:15px;
}     
	
.map_style {
	min-height: 340px;
	width:340px;
}
	
.firma {
	height:10px
}
	
.map-text {
	font-family: Arial Narrow; 
	font-size:12pt;
	text-align:left;
}
	
.prov {
	font-family: Arial Narrow; 
	font-size:14pt;
}
	
@media (min-width: 320px) and (max-width: 799px) {
	.logo img {
		position: fixed;
		top: 0;
		height: 30px;
		width: 125px;
	}
   
	nav ul {
		max-height: 0px;
		background: white;
		text-align:left;
	}
   
	nav.black ul {
		background: white;
	}
   
	.showing {
		max-height:15em;
	}
   
	nav ul li {
		box-sizing: border-box;
		width: 100%;
		padding: 15px;
		float: left;
	}
   
	.menu-icon {
		display: block;
		height: 40px;
	}
	
	.caption {
	  	display: block;
	}
	
	.firma {
		width: 100%;
		left: 0;
		position: absolute;
		right: 0;
		bottom: 0;
		height:auto; 
		margin-bottom: 30%;
	}
	
	.map_style {
		width: 100%;
		margin-left:0px;
	}
	
	.map-text {
		font-family: Arial Narrow; 
		font-size:12pt;
		text-align:center;
		margin-left:0px;
	}
	
	.prov {
		font-family: Arial Narrow; 
		font-size:12pt;
		margin-left:0px;  
		margin-top:0px;  
  	}
	
  	.no_width_container {
		padding-right: 15px;
		padding-left: 15px;
		margin-right: auto;
		margin-left: auto;
	}
	.footer {
	  	margin-top: 95%;
	}
}

lynge1991
Begynder
Indlæg:4
Tilmeldt:16. jul 2018, 13:58

Re: Hjælp til kontakt side

Indlæg af lynge1991 » 18. jul 2018, 12:34

Mange tak for hjælpen :)

Jeg oplever et andet problem på følgende side: http://sivebæksportsmanagement.dk/Fodbold

Selvom alt er sat i bokse og gjort responsiv, er der stadig en horisontal scrollbar. Jeg vil ikke anvende overflow:hidden, da jeg vil finde frem til fejlen. Kan I hjælpe?

Kode: Vælg alt

<html lang="da"> 
<head>  
 <title>Fodboldspillere</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <link rel="stylesheet" href="style.css">
  	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
      <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<style>

body {
  position: relative;
  margin: 0;
  min-height: 100%;
}  
  
.logo img {
      position: fixed;
      float: left;
  	  height: 40px;
 	  width: 130px;
  	  margin-top:5px;	
}
 
nav {
        position: fixed;
        width: 100%;
}	
 
nav ul {
      line-height: 20px;
      list-style: none;
      background: white;
  	  border-bottom:1px solid #000;
      overflow: hidden;
      padding: 0;
      text-align: right;
      margin: 0;
      padding-right: 25px;
      transition: 1s;
}
 
nav.black ul {
      background:white;
}
 
nav ul li {
      display: inline-block;
      padding: 14px 25px;
}
 
nav ul li a {
      text-decoration: none;
      color:black;
      font-weight: lighter;
  	  font-size: 12px;
      font-family: 'Open Sans', sans-serif;
  	  text-transform: uppercase;
}
 
.menu-icon {
      line-height: 60px;
      width: 100%;
      background:white;
      text-align: right;
      box-sizing: border-box;
      padding: 2px 20px;
      cursor: pointer;
      color: black;
      display: none;
}
  
 .luft {
	height: 7vh;
	}
  
 .bund {
	height: 20vh;
	}
  
    .overskrift {
	text-align: center;
    margin-top:3%; 
    margin-bottom:4%;
    font-family: Source Serif Pro Regular; 
    font-size:22px; 
	}
  
  .linje{
	width:30%;
	}
  
* {
    box-sizing: border-box;
}

.column {
    float: left;
    width: 25%;
    padding: 35px;
  	font-family:Arial;
  	font-size:11px;
  	display: inline-block;
}

  
/* Clearfix (clear floats) */
.row::after {
    content: "";
    clear: both;
    display: table;
}
  
.footer {
  position: absolute;
  right: 0;
  bottom:0;
  left: 0;
  background-color:#214953;
  height:80px;
  width:100%;
  text-align:center;
}    
  
.social-logo {
  height:40px;
  margin-top:15px;
}  
  
  
@media (min-width: 320px) and (max-width: 549px) {
   
  .logo img{
            position: fixed;
            top: 0;
            height: 30px;
 	  		width: 125px;
      }
 
      nav ul {
            max-height: 0px;
            background: white;
        	text-align:left;
      }
 
      nav.black ul {
            background: white;
      }
 
      .showing {
            max-height:15em;
      }
 
      nav ul li {
            box-sizing: border-box;
            width: 100%;
            padding: 15px;
            float: left;
      }
 
      .menu-icon {
            display: block;
        	height: 40px;
      }
  
   .column {
        width: 100%;
    }
  
   .overskrift {
	text-align: center;
    margin-top:6%; 
    margin-bottom:4%;
    font-family: Source Serif Pro Regular; 
    font-size:16px; 
	}
  
  .linje{
	width:50%;
	}
}
  
@media (min-width: 550px) and (max-width: 799px) {
   .logo img{
            position: fixed;
            top: 0;
            height: 30px;
 	  		width: 125px;
      }
 
      nav ul {
            max-height: 0px;
            background: white;
        	text-align:left;
      }
 
      nav.black ul {
            background: white;
      }
 
      .showing {
            max-height:15em;
      }
 
      nav ul li {
            box-sizing: border-box;
            width: 100%;
            padding: 15px;
            float: left;
      }
 
      .menu-icon {
            display: block;
        	height: 40px;
      }
  
   .column {
        width: 50%;
    }
   }
  
@media (min-width: 801px) and (max-width: 1024px) {
  
    .logo img{
            position: fixed;
            top: 0;
            height: 30px;
 	  		width: 125px;
      }
 
      nav ul {
            max-height: 0px;
            background: white;
        	text-align:left;
      }
 
      nav.black ul {
            background: white;
      }
 
      .showing {
            max-height:15em;
      }
 
      nav ul li {
            box-sizing: border-box;
            width: 100%;
            padding: 15px;
            float: left;
      }
 
      .menu-icon {
            display: block;
        	height: 40px;
      }
  
   .column {
        width: 33,33%;
    }
   }
  
@media (min-width: 1025px) {
  
    .column {
        width: 25%;
    }
  }
  
hr {
color: black;
 background-color: black;
  height: 1px;
 }     
  
.footer {
  position: absolute;
  right: 0;
  bottom:0;
  left: 0;
  background-color:#214953;
  height:80px;
  width:100%;
  text-align:center;
}    
  
.social-logo {
  height:40px;
  margin-top:15px;
}  
 
</style>  
</head>
  

<body>  


      <div class="wrapper">
                  <nav>
                        <div class="menu-icon">
                              <i class="fa fa-bars fa-lg" style="margin-top:10px;"></i>
                        </div>

                        <div class="logo">
                           <a href="/Forside"><img id="logo" src="/Img/Sivebaek.png" alt="Sivebk logo"/></a>
                        </div>

                        <div class="menu">
                              <ul>
                                    <li><a href="/Forside">Forside</a></li>
                                    <li><a href="/Fodbold">Fodbold</a></li>
                                    <li><a href="/Esport">Esport</a></li>
                                    <li><a href="/Kontakt">Kontakt</a></li>
                              </ul>
                        </div>
                  </nav>

      </div>

      <script type="text/javascript">

      // Menu-toggle button

      $(document).ready(function() {
            $(".menu-icon").on("click", function() {
                  $("nav ul").toggleClass("showing");
            });
      });

      </script> 

  <header>
    <div class="luft"></div>
  </header> 
  
  
<div>
<img src="/Img/bold.png" width="100%" height="450">
</div>  
   
  <h2 class="overskrift"><B>SENIORSPILLERE</B><hr class="linje"></h2>

 <div class="row">
   
 <div class="column">
    <img src="/Img/Enevoldsen.jpg" style="width:100%; height: 265px;"/>
      <p style="margin-top:13px;"><B>Thomas Enevoldsen</B></p>
      <p>27-07-1987</p>
   	  <p>Orange County SC</p>
  </div>
   
  <div class="column">
    <img src="/Img/Vingaard.jpg" style="width:100%; height: 265px;;"/>
      <p style="margin-top:13px;"><B>Martin Vingaard</B></p>
      <p>20-03-1985</p>
   	  <p>Tampa Bay Rowdies</p>
  </div>
 
  <div class="column">
    <img src="/Img/Profile.png" style="width:100%; height: 265px;"/>
      <p style="margin-top:13px;"><B>Kim Elgaard</B></p>
      <p>24-09-1991</p>
   	  <p>United Victory FC</p>
  </div> 
   
  <div class="column">
    <img src="/Img/Azer.jpg" style="width:100%; height: 265px;"/>
      <p style="margin-top:13px;"><B>Azer Busuladzic</B></p>
      <p>12-11-1991</p>
   	  <p>Atromitos Athen</p>
  </div> 
   
   <div class="column">
    <img src="/Img/Kusk.jpg" style="width:100%; height: 265px;"/>
      <p style="margin-top:13px;"><B>Kasper Kusk</B></p>
      <p>10-11-1991</p>
   	  <p>Aalborg BK</p>
  </div>
   
  <div class="column">
    <img src="/Img/Mike.jpg" style="width:100%; height: 265px;;"/>
      <p style="margin-top:13px;"><B>Michael Lansing</B></p>
      <p>13-06-1994</p>
   	  <p>Aalborg BK</p>
  </div>
 
  <div class="column">
    <img src="/Img/Profile.png" style="width:100%; height: 265px;"/>
      <p style="margin-top:13px;"><B>Alexander Ammitzbll</B></p>
      <p>17-02-1999</p>
   	  <p>Aarhus GF</p>
  </div> 
   
  <div class="column">
    <img src="/Img/Profile.png" style="width:100%; height: 265px;"/>
      <p style="margin-top:13px;"><B>Kasper Kristensen</B></p>
      <p>04-08-1999</p>
   	  <p>Aarhus GF</p>
  </div>  
   
     <div class="column">
    <img src="/Img/Kortegaard.jpg" style="width:100%; height: 265px;"/>
      <p style="margin-top:13px;"><B>Thomas Kortegaard</B></p>
      <p>02-07-1984</p>
   	  <p>AC Horsens</p>
  </div>

   
  <div class="column">
    <img src="/Img/Profile.png" style="width:100%; height: 265px;;"/>
      <p style="margin-top:13px;"><B>Kevin Mendoza</B></p>
      <p>29-09-1994</p>
   	  <p>AC Horsens</p>
  </div>
 
  <div class="column">
    <img src="/Img/Profile.png" style="width:100%; height: 265px;"/>
      <p style="margin-top:13px;"><B>Sebastian Bruhn</B></p>
      <p>16-09-1998</p>
   	  <p>AC Horsens</p>
  </div> 
   
  <div class="column">
    <img src="/Img/Torp.jpg" style="width:100%; height: 265px;"/>
      <p style="margin-top:13px;"><B>Victor Torp</B></p>
      <p>30-07-1999</p>
   	  <p>FC Fredericia (Leje FCM)</p>
  </div> 
   
    <div class="column">
    <img src="/Img/Buch.jpg" style="width:100%; height: 265px;"/>
      <p style="margin-top:13px;"><B>Sebastian Buch</B></p>
      <p>28-01-1999</p>
   	  <p>FC Fredericia (Leje FCM)</p>
  </div>
   
  <div class="column">
    <img src="/Img/Ottesen.jpg" style="width:100%; height: 265px;;"/>
       <p style="margin-top:13px;"><B>Oliver Ottesen</B></p>
      <p>22-08-1998</p>
   	  <p>FC Midtjylland</p>
  </div>
 
  <div class="column">
    <img src="/Img/Hansen.jpg" style="width:100%; height: 265px;"/>
      <p style="margin-top:13px;"><B>Benjamin Hansen</B></p>
      <p>07-02-1994</p>
   	  <p>FC Nordsjlland</p>
  </div> 
   
  <div class="column">
    <img src="/Img/Sebastian.jpg" style="width:100%; height: 265px;"/>
      <p style="margin-top:13px;"><B>Sebastian Olsen</B></p>
      <p>12-02-1988</p>
   	  <p>Nykbing FC</p>
  </div> 
   
    <div class="column">
    <img src="/Img/Profile.png" style="width:100%; height: 265px;"/>
      <p style="margin-top:13px;"><B>Chris Thorsheim</B></p>
      <p>30-06-1994</p>
   	  <p>Nykbing FC</p>
  </div>
   
  <div class="column">
    <img src="/Img/Agon.jpg" style="width:100%; height: 265px;;"/>
      <p style="margin-top:13px;"><B>Agon Mucolli</B></p>
      <p>26-09-1998</p>
   	  <p>Vejle BK</p>
  </div>
 
  <div class="column">
    <img src="/Img/Abnor.jpg" style="width:100%; height: 265px;"/>
      <p style="margin-top:13px;"><B>Abnor Mucolli</B></p>
      <p>15-09-1999</p>
   	  <p>Vejle BK</p>
  </div> 
   
  <div class="column">
    <img src="/Img/Profile.png" style="width:100%; height: 265px;"/>
      <p style="margin-top:13px;"><B>Tobias Mlgaard</B></p>
      <p>22-07-1996</p>
   	  <p>Vejle BK</p>
  </div> 
  
    <div class="column">
    <img src="/Img/Profile.png" style="width:100%; height: 265px;"/>
      <p style="margin-top:13px;"><B>Kasper Povlsen</B></p>
      <p>26-09-1989</p>
   	  <p>Vendsyssel FF</p>
  </div>
  
   
  <div class="column">
    <img src="/Img/Profile.png" style="width:100%; height: 265px;;"/>
      <p style="margin-top:13px;"><B>Jeff Mensah</B></p>
      <p>10-08-1992</p>
   	  <p>Viborg FF</p>
  </div>

   <div class="column">
    <img src="/Img/Profile.png" style="width:100%; height: 265px;"/>
      <p style="margin-top:13px;"><B>Behrem Rizvic</B></p>
      <p>15-11-1998</p>
   	  <p>Free agent</p>
  </div>
   
  <div class="column">
    <img src="/Img/Profile.png" style="width:100%; height: 265px;;"/>
      <p style="margin-top:13px;"><B>Michael Zacho Jrgensen</B></p>
      <p>11-11-1996</p>
   	  <p>Free agent</p>
  </div>
  </div>
 
 
  
   <h2 class="overskrift"><B>UNGDOMSSPILLERE</B><hr class="linje"></h2>
   
 <div class="row">
   
  <div class="column">
    <img class="tester" src="/Img/Zifarlino.jpg" style="width:100%; height: 265px;"/>
      <p style="margin-top:13px;"><B>Zifarlino Nsoni</B></p>
      <p>20-05-2002</p>
      <p>Aalborg BK</p>
  </div>

 <div class="column">
    <img class="tester" src="/Img/Profile.png" style="width:100%; height: 265px;"/>
      <p style="margin-top:13px;"><B>Martinus Mandal</B></p>
      <p>?</p>
      <p>Aarhus GF</p>
  </div>
  
<div class="column">
    <img class="tester" src="/Img/Profile.png" style="width:100%; height: 265px;"/>
      <p style="margin-top:13px;"><B>Mathias Madsen</B></p>
      <p>10-03-2002</p>
      <p>Ac Horsens</p>
  </div>

  <div class="column">
    <img class="tester" src="/Img/Tengstedt.jpg" style="width:100%; height: 265px;"/>
      <p style="margin-top:13px;"><B>Casper Tengstedt</B></p>
      <p>01-06-2000</p>
      <p>FC Midtjylland</p>
  </div>  

  <div class="column">
    <img src="/Img/Profile.png" style="width:100%; height: 265px;"/>
      <p style="margin-top:13px;"><B>Christian Hechmann</B></p>
      <p>11-09-2000</p>
      <p>Vejle BK</p>
  </div>  

<div class="column">
    <img class="tester" src="/Img/Alexander.jpg" style="width:100%; height: 265px;"/>
      <p style="margin-top:13px;"><B>Alexander Jensen</B></p>
      <p>24-08-2001</p>
      <p>Vejle BK</p>
  </div>  
   
  <div class="column">
    <img class="tester" src="/Img/Ullum.jpg" style="width:100%; height: 265px;"/>
      <p style="margin-top:13px;"><B>Peter Ullum</B></p>
      <p>05-03-2002</p>
      <p>Vejle BK</p>
  </div>  
   
    <div class="column">
    <img class="tester" src="/Img/Profile.png" style="width:100%; height: 265px;"/>
      <p style="margin-top:13px;"><B>Mads Frederiksen</B></p>
      <p>07-03-2002</p>
      <p>Viborg FF</p>
   </div>   

   
</div>
  
<div class="footer">

    <a href="https://www.facebook.com/scoutpocket/"><img class="social-logo" src="Img/facebook.png"/></a>
    <a href="https://www.facebook.com/scoutpocket/"><img class="social-logo" src="Img/instagram.png"/></a>
    <a href="https://www.facebook.com/scoutpocket/"><img class="social-logo" src="Img/linkedin.png"/></a>

</div>     
 
  <header>
    <div class="bund"></div>
  </header> 
  
</body>
</html>
Senest rettet af Daniel 21. jul 2018, 11:37, rettet i alt 2 gange.
Begrundelse: Indsat code tags

jepperask
Geni
Geni
Indlæg:378
Tilmeldt:4. nov 2012, 17:57

Re: Hjælp til kontakt side

Indlæg af jepperask » 19. jul 2018, 18:31

Prøv at sætte en div med klassen "container-fluid" rundt om dine rows og andet, sådan her:

Kode: Vælg alt

<html lang="da"> 
<head> 
<title>Fodboldspillere</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<style>

body {
position: relative;
margin: 0;
min-height: 100%;
} 

.logo img {
position: fixed;
float: left;
height: 40px;
width: 130px;
margin-top:5px;	
}

nav {
position: fixed;
width: 100%;
}	

nav ul {
line-height: 20px;
list-style: none;
background: white;
border-bottom:1px solid #000;
overflow: hidden;
padding: 0;
text-align: right;
margin: 0;
padding-right: 25px;
transition: 1s;
}

nav.black ul {
background:white;
}

nav ul li {
display: inline-block;
padding: 14px 25px;
}

nav ul li a {
text-decoration: none;
color:black;
font-weight: lighter;
font-size: 12px;
font-family: 'Open Sans', sans-serif;
text-transform: uppercase;
}

.menu-icon {
line-height: 60px;
width: 100%;
background:white;
text-align: right;
box-sizing: border-box;
padding: 2px 20px;
cursor: pointer;
color: black;
display: none;
}

.luft {
height: 7vh;
}

.bund {
height: 20vh;
}

.overskrift {
text-align: center;
margin-top:3%; 
margin-bottom:4%;
font-family: Source Serif Pro Regular; 
font-size:22px; 
}

.linje{
width:30%;
}

* {
box-sizing: border-box;
}

.column {
float: left;
width: 25%;
padding: 35px;
font-family:Arial;
font-size:11px;
display: inline-block;
}


/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}

.footer {
position: absolute;
right: 0;
bottom:0;
left: 0;
background-color:#214953;
height:80px;
width:100%;
text-align:center;
} 

.social-logo {
height:40px;
margin-top:15px;
} 


@media (min-width: 320px) and (max-width: 549px) {

.logo img{
position: fixed;
top: 0;
height: 30px;
width: 125px;
}

nav ul {
max-height: 0px;
background: white;
text-align:left;
}

nav.black ul {
background: white;
}

.showing {
max-height:15em;
}

nav ul li {
box-sizing: border-box;
width: 100%;
padding: 15px;
float: left;
}

.menu-icon {
display: block;
height: 40px;
}

.column {
width: 100%;
}

.overskrift {
text-align: center;
margin-top:6%; 
margin-bottom:4%;
font-family: Source Serif Pro Regular; 
font-size:16px; 
}

.linje{
width:50%;
}
}

@media (min-width: 550px) and (max-width: 799px) {
.logo img{
position: fixed;
top: 0;
height: 30px;
width: 125px;
}

nav ul {
max-height: 0px;
background: white;
text-align:left;
}

nav.black ul {
background: white;
}

.showing {
max-height:15em;
}

nav ul li {
box-sizing: border-box;
width: 100%;
padding: 15px;
float: left;
}

.menu-icon {
display: block;
height: 40px;
}

.column {
width: 50%;
}
}

@media (min-width: 801px) and (max-width: 1024px) {

.logo img{
position: fixed;
top: 0;
height: 30px;
width: 125px;
}

nav ul {
max-height: 0px;
background: white;
text-align:left;
}

nav.black ul {
background: white;
}

.showing {
max-height:15em;
}

nav ul li {
box-sizing: border-box;
width: 100%;
padding: 15px;
float: left;
}

.menu-icon {
display: block;
height: 40px;
}

.column {
width: 33,33%;
}
}

@media (min-width: 1025px) {

.column {
width: 25%;
}
}

hr {
color: black;
background-color: black;
height: 1px;
} 

.footer {
position: absolute;
right: 0;
bottom:0;
left: 0;
background-color:#214953;
height:80px;
width:100%;
text-align:center;
} 

.social-logo {
height:40px;
margin-top:15px;
} 

</style> 
</head>


<body> 


<div class="wrapper">
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-lg" style="margin-top:10px;"></i>
</div>

<div class="logo">
<a href="/Forside"><img id="logo" src="http://sivebæksportsmanagement.dk/Img/Sivebaek.png" alt="Sivebk logo"/></a>
</div>

<div class="menu">
<ul>
<li><a href="/Forside">Forside</a></li>
<li><a href="/Fodbold">Fodbold</a></li>
<li><a href="/Esport">Esport</a></li>
<li><a href="/Kontakt">Kontakt</a></li>
</ul>
</div>
</nav>

</div>

<script type="text/javascript">

// Menu-toggle button

$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
});

</script> 

<header>
<div class="luft"></div>
</header> 


<div>
<img src="http://sivebæksportsmanagement.dk/Img/bold.png" width="100%" height="450">
</div> 
<div class="container-fluid">


<h2 class="overskrift"><B>SENIORSPILLERE</B><hr class="linje"></h2>

<div class="row">

<div class="column">
<img src="http://sivebæksportsmanagement.dk/Img/Enevoldsen.jpg" style="width:100%; height: 265px;"/>
<p style="margin-top:13px;"><B>Thomas Enevoldsen</B></p>
<p>27-07-1987</p>
<p>Orange County SC</p>
</div>

<div class="column">
<img src="http://sivebæksportsmanagement.dk/Img/Vingaard.jpg" style="width:100%; height: 265px;;"/>
<p style="margin-top:13px;"><B>Martin Vingaard</B></p>
<p>20-03-1985</p>
<p>Tampa Bay Rowdies</p>
</div>

<div class="column">
<img src="http://sivebæksportsmanagement.dk/Img/Profile.png" style="width:100%; height: 265px;"/>
<p style="margin-top:13px;"><B>Kim Elgaard</B></p>
<p>24-09-1991</p>
<p>United Victory FC</p>
</div> 

<div class="column">
<img src="http://sivebæksportsmanagement.dk/Img/Azer.jpg" style="width:100%; height: 265px;"/>
<p style="margin-top:13px;"><B>Azer Busuladzic</B></p>
<p>12-11-1991</p>
<p>Atromitos Athen</p>
</div> 

<div class="column">
<img src="http://sivebæksportsmanagement.dk/Img/Kusk.jpg" style="width:100%; height: 265px;"/>
<p style="margin-top:13px;"><B>Kasper Kusk</B></p>
<p>10-11-1991</p>
<p>Aalborg BK</p>
</div>

<div class="column">
<img src="http://sivebæksportsmanagement.dk/Img/Mike.jpg" style="width:100%; height: 265px;;"/>
<p style="margin-top:13px;"><B>Michael Lansing</B></p>
<p>13-06-1994</p>
<p>Aalborg BK</p>
</div>

<div class="column">
<img src="http://sivebæksportsmanagement.dk/Img/Profile.png" style="width:100%; height: 265px;"/>
<p style="margin-top:13px;"><B>Alexander Ammitzbll</B></p>
<p>17-02-1999</p>
<p>Aarhus GF</p>
</div> 

<div class="column">
<img src="http://sivebæksportsmanagement.dk/Img/Profile.png" style="width:100%; height: 265px;"/>
<p style="margin-top:13px;"><B>Kasper Kristensen</B></p>
<p>04-08-1999</p>
<p>Aarhus GF</p>
</div> 

<div class="column">
<img src="http://sivebæksportsmanagement.dk/Img/Kortegaard.jpg" style="width:100%; height: 265px;"/>
<p style="margin-top:13px;"><B>Thomas Kortegaard</B></p>
<p>02-07-1984</p>
<p>AC Horsens</p>
</div>


<div class="column">
<img src="http://sivebæksportsmanagement.dk/Img/Profile.png" style="width:100%; height: 265px;;"/>
<p style="margin-top:13px;"><B>Kevin Mendoza</B></p>
<p>29-09-1994</p>
<p>AC Horsens</p>
</div>

<div class="column">
<img src="http://sivebæksportsmanagement.dk/Img/Profile.png" style="width:100%; height: 265px;"/>
<p style="margin-top:13px;"><B>Sebastian Bruhn</B></p>
<p>16-09-1998</p>
<p>AC Horsens</p>
</div> 

<div class="column">
<img src="http://sivebæksportsmanagement.dk/Img/Torp.jpg" style="width:100%; height: 265px;"/>
<p style="margin-top:13px;"><B>Victor Torp</B></p>
<p>30-07-1999</p>
<p>FC Fredericia (Leje FCM)</p>
</div> 

<div class="column">
<img src="http://sivebæksportsmanagement.dk/Img/Buch.jpg" style="width:100%; height: 265px;"/>
<p style="margin-top:13px;"><B>Sebastian Buch</B></p>
<p>28-01-1999</p>
<p>FC Fredericia (Leje FCM)</p>
</div>

<div class="column">
<img src="http://sivebæksportsmanagement.dk/Img/Ottesen.jpg" style="width:100%; height: 265px;;"/>
<p style="margin-top:13px;"><B>Oliver Ottesen</B></p>
<p>22-08-1998</p>
<p>FC Midtjylland</p>
</div>

<div class="column">
<img src="http://sivebæksportsmanagement.dk/Img/Hansen.jpg" style="width:100%; height: 265px;"/>
<p style="margin-top:13px;"><B>Benjamin Hansen</B></p>
<p>07-02-1994</p>
<p>FC Nordsjlland</p>
</div> 

<div class="column">
<img src="http://sivebæksportsmanagement.dk/Img/Sebastian.jpg" style="width:100%; height: 265px;"/>
<p style="margin-top:13px;"><B>Sebastian Olsen</B></p>
<p>12-02-1988</p>
<p>Nykbing FC</p>
</div> 

<div class="column">
<img src="http://sivebæksportsmanagement.dk/Img/Profile.png" style="width:100%; height: 265px;"/>
<p style="margin-top:13px;"><B>Chris Thorsheim</B></p>
<p>30-06-1994</p>
<p>Nykbing FC</p>
</div>

<div class="column">
<img src="http://sivebæksportsmanagement.dk/Img/Agon.jpg" style="width:100%; height: 265px;;"/>
<p style="margin-top:13px;"><B>Agon Mucolli</B></p>
<p>26-09-1998</p>
<p>Vejle BK</p>
</div>

<div class="column">
<img src="http://sivebæksportsmanagement.dk/Img/Abnor.jpg" style="width:100%; height: 265px;"/>
<p style="margin-top:13px;"><B>Abnor Mucolli</B></p>
<p>15-09-1999</p>
<p>Vejle BK</p>
</div> 

<div class="column">
<img src="http://sivebæksportsmanagement.dk/Img/Profile.png" style="width:100%; height: 265px;"/>
<p style="margin-top:13px;"><B>Tobias Mlgaard</B></p>
<p>22-07-1996</p>
<p>Vejle BK</p>
</div> 

<div class="column">
<img src="http://sivebæksportsmanagement.dk/Img/Profile.png" style="width:100%; height: 265px;"/>
<p style="margin-top:13px;"><B>Kasper Povlsen</B></p>
<p>26-09-1989</p>
<p>Vendsyssel FF</p>
</div>


<div class="column">
<img src="http://sivebæksportsmanagement.dk/Img/Profile.png" style="width:100%; height: 265px;;"/>
<p style="margin-top:13px;"><B>Jeff Mensah</B></p>
<p>10-08-1992</p>
<p>Viborg FF</p>
</div>

<div class="column">
<img src="http://sivebæksportsmanagement.dk/Img/Profile.png" style="width:100%; height: 265px;"/>
<p style="margin-top:13px;"><B>Behrem Rizvic</B></p>
<p>15-11-1998</p>
<p>Free agent</p>
</div>

<div class="column">
<img src="http://sivebæksportsmanagement.dk/Img/Profile.png" style="width:100%; height: 265px;;"/>
<p style="margin-top:13px;"><B>Michael Zacho Jrgensen</B></p>
<p>11-11-1996</p>
<p>Free agent</p>
</div>
</div>



<h2 class="overskrift"><B>UNGDOMSSPILLERE</B><hr class="linje"></h2>

<div class="row">

<div class="column">
<img class="tester" src="http://sivebæksportsmanagement.dk/Img/Zifarlino.jpg" style="width:100%; height: 265px;"/>
<p style="margin-top:13px;"><B>Zifarlino Nsoni</B></p>
<p>20-05-2002</p>
<p>Aalborg BK</p>
</div>

<div class="column">
<img class="tester" src="http://sivebæksportsmanagement.dk/Img/Profile.png" style="width:100%; height: 265px;"/>
<p style="margin-top:13px;"><B>Martinus Mandal</B></p>
<p>?</p>
<p>Aarhus GF</p>
</div>

<div class="column">
<img class="tester" src="http://sivebæksportsmanagement.dk/Img/Profile.png" style="width:100%; height: 265px;"/>
<p style="margin-top:13px;"><B>Mathias Madsen</B></p>
<p>10-03-2002</p>
<p>Ac Horsens</p>
</div>

<div class="column">
<img class="tester" src="http://sivebæksportsmanagement.dk/Img/Tengstedt.jpg" style="width:100%; height: 265px;"/>
<p style="margin-top:13px;"><B>Casper Tengstedt</B></p>
<p>01-06-2000</p>
<p>FC Midtjylland</p>
</div> 

<div class="column">
<img src="http://sivebæksportsmanagement.dk/Img/Profile.png" style="width:100%; height: 265px;"/>
<p style="margin-top:13px;"><B>Christian Hechmann</B></p>
<p>11-09-2000</p>
<p>Vejle BK</p>
</div> 

<div class="column">
<img class="tester" src="http://sivebæksportsmanagement.dk/Img/Alexander.jpg" style="width:100%; height: 265px;"/>
<p style="margin-top:13px;"><B>Alexander Jensen</B></p>
<p>24-08-2001</p>
<p>Vejle BK</p>
</div> 

<div class="column">
<img class="tester" src="http://sivebæksportsmanagement.dk/Img/Ullum.jpg" style="width:100%; height: 265px;"/>
<p style="margin-top:13px;"><B>Peter Ullum</B></p>
<p>05-03-2002</p>
<p>Vejle BK</p>
</div> 

<div class="column">
<img class="tester" src="http://sivebæksportsmanagement.dk/Img/Profile.png" style="width:100%; height: 265px;"/>
<p style="margin-top:13px;"><B>Mads Frederiksen</B></p>
<p>07-03-2002</p>
<p>Viborg FF</p>
</div> 


</div>
</div>
<div class="footer">

<a href="https://www.facebook.com/scoutpocket/"><img class="social-logo" src="Img/facebook.png"/></a>
<a href="https://www.facebook.com/scoutpocket/"><img class="social-logo" src="Img/instagram.png"/></a>
<a href="https://www.facebook.com/scoutpocket/"><img class="social-logo" src="Img/linkedin.png"/></a>

</div> 

<header>
<div class="bund"></div>
</header> 

</body>
</html>
Generelt skal du altid have enten "container" (for en div med ~1300px bredde) eller "container-fluid" (for fuld bredde) rundt om dine row-elementer.
Læs mere her: https://getbootstrap.com/docs/4.1/layout/overview/ eller 3.3 som du ser ud til at bruge: https://getbootstrap.com/docs/3.3/css/#grid

Når du indsætter kode her på siden, kan du gøre det ved at trykke "Code" her i editoren og indsætte din kode mellem de 2 tags, så vil det blive printet lidt pænere her på forum. :-)

lynge1991
Begynder
Indlæg:4
Tilmeldt:16. jul 2018, 13:58

Re: Hjælp til kontakt side

Indlæg af lynge1991 » 26. jul 2018, 23:36

Jeg søger hjælp til design af navigation baren, hvor jeg gerne vil have en dropdown (ved fodbold), med 2 underkategorier - bare kald dem link 1 og link 2. Jeg vil gerne, at denne dropdown først bliver aktiveret når man klikker på den.
Navigation baren skal være responsiv, og dropdown ligeledes først bliver synlig her når man klikker på den.

Jeg har allerede lavet en navigation bar, men søger altså hjælp til ovenstående. Dette er hjemmesiden: http://sivebæksportsmanagement.dk

På forhånd tak :)

Koden fremgår her:

Kode: Vælg alt


 <div class="wrapper">
                  <nav>
                        <div class="menu-icon">
                              <i class="fa fa-bars fa-lg" style="margin-top:10px;"></i>
                        </div>

                        <div class="logo">
                           <a href="/"><img id="logo" src="/Img/Sivebaek.png" alt="Sivebk logo"/></a>
                        </div>

                        <div class="menu">
                              <ul>
                                    <li><a href="/">Forside</a></li>
                                    <li><a href="/Fodbold">Fodbold</a></li>
                                    <li><a href="/Kontakt">Kontakt</a></li>
                              </ul>
                        </div>
                  </nav>

      </div>    

      <script type="text/javascript">

      // Menu-toggle button

      $(document).ready(function() {
            $(".menu-icon").on("click", function() {
                  $("nav ul").toggleClass("showing");
            });
      });
  </script>

Kode: Vælg alt


.logo img {
      position: fixed;
      float: left;
  	  height: 40px;
 	  width: 130px;
  	  margin-top:5px;
	
}

nav {
        position: fixed;
        width: 100%;
  		z-index:1;
	}	
 
nav ul {
      line-height: 20px;
      list-style: none;
      background: white;
  	  border-bottom:1px solid #000;
      overflow: hidden;
      padding: 0;
      text-align: right;
      margin: 0;
      padding-right: 25px;
      transition: 1s;
}
 
nav.black ul {
      background:white;
}
 
nav ul li {
      display: inline-block;
      padding: 14px 25px;
}
 
nav ul li a {
      text-decoration: none;
      color:black;

  	  font-size: 13px;
      font-family: Arial Narrow;
  	  text-transform: uppercase;
}
 
.menu-icon {
      line-height: 60px;
      width: 100%;
      background:white;
      text-align: right;
      box-sizing: border-box;
      padding: 2px 20px;
      cursor: pointer;
      color: black;
      display: none;
}

@media (min-width: 320px) and (max-width: 499px) {
 
      .logo img{
            position: fixed;
            top: 0;
            height: 30px;
 	  		width: 125px;
      }
 
      nav ul {
            max-height: 0px;
            background: white;
        	text-align:left;
      }
 
      nav.black ul {
            background: white;
      }
 
      .showing {
            max-height:15em;
      }
 
      nav ul li {
            box-sizing: border-box;
            width: 100%;
            padding: 15px;
            float: left;
      }
 
      .menu-icon {
            display: block;
        	height: 40px;
      }
  }

Besvar