• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

3 Spalten

claudiafragt

Neues Mitglied
Hallo leute ich habe ein Problem, da ich Anfängerin bin und eine eigene Seite machen möchte bräuchte ich eure Hilfe!
Ich habe bereits eine Vorlage und möchte drei spalten haben

Verlinkung strich artikel strich bild

wist ihr was ich meine?
währt ir so lieb und könnte mir jemand eine php oder html date dazu schreiben währe ganz lieb von euch!
eure claudi
 
Werbung:
Um dir helfen zu können bräuchten wir deinen bisherigen HTML- und CSS-Quellcode.

Grundsätzlich ist das eine Aufgabe für Flexbox oder CSS-Grid.

Trennlinien werden in der Regel mit der CSS-Eigenschaft "border" erstellt.
 
Hier der Code den ich bereits habe
<!DOCTYPE html>
<html lang="de">
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- For Google -->
<link rel="author" href="https://liebezicken.de">
<link rel="publisher" href="https://plus.google.com/+Scoopthemes">
<link rel="canonical" href="">
<title>Meine Seite</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="" />
<meta name="revisit-after" content="1 days" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- font Awesome CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<!-- Main Styles CSS -->
<link href="css/main.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
&nbsp;
<center><img src="images/Vereinslogo.jpg" width="300" height="250"></center>
<div class="container">

<nav class="navbar navbar-default navbar-inverse" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Drachenritter</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Orden <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="orden.php"> Orden</a></li>
<li><a href="fest.php">Fest</a></li>
</ul>
</li>

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Ritterschaft<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="orden.php">Der Orden</a></li>
<li><a href="kalender.php">Veranstaltungsalender</a></li>
<li><a href="veranstaltungen.php">Veranstaltungen</a></li>
<li><a href="schmuck.php">Schmuck</a></li>
<li><a href="links.php">Links</a></li>
<li><a href="downloads.php">Downloads</a></li>
<li class="divider"></li>
<li><a href="mitglied.php">Mitglied werden</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Freunde <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="freunde.php">Freunde</a></li>

</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Aktionen <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<center><h1>Herzlich Willkommen</h1><center>
<center><p>Hier würde ich gerne drei Spalten haben!
verlinkung strich text strich bild</p> </center>


<hr>
<footer>
<div class="copy-rights clearfix">
<div class="pull-left">
<div id="copyrightdesign">Copyright © 2019 Liebezicken |
Design by <a href=https://liebezicken.de shape="rect">Liebezicken</a> | <a class="footerLink" href="javascript:print();" shape="rect">DRUCKEN</a> | <a href="impressum.php" shape="rect">Impressum</a>| <a href="datenschutz.php">Datenschutzerklärung</a>



|<a href="https://rs025.aiw47851-server.de:84...ct_url=https://rs025.aiw47851-server.de:8443/">Login</a> <a target="_blank" href="https://www.facebook.com/" shape="rect"><img width="30" height="30" alt="" border="0" src="./images/facebook.png" /></a><a href="http://www.youtube.com/" shape="rect"><img width="30" height="30" alt="" border="0" src="./images/80x80-youtube.png" /></a><a target="_blank" href="https://twitter.com/" shape="rect"><img width="30" height="30" alt="" border="0" src="./images/80x80-twitter.png" /></a>
</div>
</div>
</footer>
</div>
<!-- /.container -->



<div class="container">

</div>
<!-- /.container -->

</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<!-- Bootstrap JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<!-- Custom JavaScript -->
<script src="js/custom.js"></script>
<!-- Call functions on document ready -->
<script>
$(document).ready(function() {
// Call Functions Like
appMaster.aFunction();
// Call anotherFunction
appMaster.anotherFunction();
});
</script>
</body>
</html>

kannst du mir bitte helfen, es sollte denke ich ganz einfach sein, nur ich komme leider nicht drauf
 
Werbung:
Zu diesem Quelltext

Code:
<section class="spalten">
   <nav>
      <h2>Verlinkung</h2>
      <a href="">Hamburg</a>
      <a href="">Bremen</a>
      <a href="">Flensburg</a>
      <a href="">Lübeck</a>
      <a href="">Hannover</a>
      <a href="">München</a>
   </nav>
   <article>
      <h2>Text</h2>
      <p>Die Städtische Straßenbahn Spandau war ein Straßenbahnbetrieb im Großraum Berlin. Das am 26. April 1892 als Spandauer Straßenbahn Simmel, Matzky &amp; Müller gegründete Unternehmen eröffnete am 1. Juni desselben Jahres seine erste Pferdebahnstrecke zwischen der damals selbstständigen Stadt Spandau und der damaligen Landgemeinde Pichelsdorf.</p>
   </article>
   <aside>
      <h2>Bild</h2>
      <figure>
         <img src="http://lorempixel.com/400/600/nature/3">
         <figcaption>Die Möwe landet.</figcaption>
      </figure>
   </aside>
</section>

kannst du dieses CSS verwenden:

Code:
.spalten {
   display: flex;
}
.spalten>* {
   flex-grow: 0;
   flex-shrink: 0;
}
.spalten>:nth-child(1) {
   padding: 0rem 0.5rem;
   flex-basis: 250px;
   display: flex;
   flex-wrap: wrap;
   flex-direction: column;
}
.spalten>:nth-child(2) {
   padding: 0rem 0.5rem;
   border-left: 1px solid gray;
   border-right: 1px solid gray;
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: 100%;
}
.spalten>:nth-child(3) {
   padding: 0rem 0.5rem;
   flex-basis: 300px;
}

Ein Hinweis von mir: Deine Lernunterlagen scheinen sehr veraltet zu sein. Du verwendest einige Elemente, die schon seit fast 20 Jahren nicht mehr verwendet werden sollten und wendest andere falsch an. Da dir damit die aktuellen Grundlagen fehlen wirst du kaum aktuelle Webseiten erstellen können.
 
Zurück
Oben