Xxxflo1901xxX
Neues Mitglied
Hey,
ich habe zwei Fragen.
1. Frage:
Ich habe mehrer Border erstellt um die hässlichen Ecken abzurunden. Nun habe ich das Problem das der Text zum Teil diese abgerundeten Ecken überschreitet das sieht nicht ganz schön aus und wolte fragen ob da einer eine Lösung hat und wenn ja wie sie lautet.
2. Frage:
Ich habe mir ein zweispaltiges Seiten Layout gebastelt. Links ganz Typisch die Navigation bzw. das Menu. Dann Rechts zuerst ein kleiner Teil wo steht auf welcher Seite man ist und da drunter dann den Inhalt der Seite. Wenn ich jetzt die rechte Seite auf die höhe des Menu setzten will weil es zu hoch steht geht der komplette Inhalt runter und nicht nur das was ich will. Hier einmal mein HTML und CSS Code.
HTML:
CSS:
Ich weiß es sieht noch nicht ganz gut aus aber ich bin ja noch im Aufbau. Ich hoffe ihr versteht meine Fragen und könnt mir schnell helfen.
MFG Xxxflo1901xxX
ich habe zwei Fragen.
1. Frage:
Ich habe mehrer Border erstellt um die hässlichen Ecken abzurunden. Nun habe ich das Problem das der Text zum Teil diese abgerundeten Ecken überschreitet das sieht nicht ganz schön aus und wolte fragen ob da einer eine Lösung hat und wenn ja wie sie lautet.
2. Frage:
Ich habe mir ein zweispaltiges Seiten Layout gebastelt. Links ganz Typisch die Navigation bzw. das Menu. Dann Rechts zuerst ein kleiner Teil wo steht auf welcher Seite man ist und da drunter dann den Inhalt der Seite. Wenn ich jetzt die rechte Seite auf die höhe des Menu setzten will weil es zu hoch steht geht der komplette Inhalt runter und nicht nur das was ich will. Hier einmal mein HTML und CSS Code.
HTML:
Code:
<html>
<head>
<title>Tischtennis Gemeinschaft Witterschlick</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<style type="text/css">
a:link {color:blue; text-decoration: none;}
a:visited {color:blue;}
a:hover {color:black; font-weight: bold;}
a:active {color:blue;}
</style>
</head>
<body>
<div class="schlaeger-links"><img src="img/schlaeger-links.png" width="155" height="155"/></div>
<div class="header">
<div class="logo"><img src="img/logo.JPG"height="160" width="700" ></div>
</div>
<div class="schlaeger-rechts"><img src="img/schlaeger-rechts.png" width="155" height="155"/></div>
<div class="container">
<div class="menu">
<div class="hover link"><a href="index.html"><b>Startseite</b></a></div>
<div class="hover link"><a href="aktuelles.html">Aktuelles</a></div>
<div class="hover link"><a href="jugend.html">Jugend</a></div>
<div class="hover link"><a href="sponsoren.html">Sponsoren</a></div>
<div class="hover link"><a href="mannschaften.html">Mannschaften</a></div>
<div class="hover link"><a href="infos.html">TTG-News, Links, Forum</a></div>
<div class="hover link"><a href="training.html">Training</a></div>
<div class="hover link"><a href="vorstand.html">Vorstand</a></div>
<div class="hover link"><a href="anmeldung.html">Anmeldung</a></div>
<div class="hover link"><a href="jubiläum-2010.html">Jubiläum 2010</a></div>
<div class="hover link"><a href="index.html">Startseite</a></div>
</div>
<div class="seite">Aktuelle Seite: <a href="index.html"><u>Home</u></a></div>
<div class="content">
<center><h1>TTG-Witterschlick Jugendabteilung</h1></center>
<hr>
<p>Herzlich Willkommen auf den Seiten der Jugend der TTG-Witterschlick e.V.! Hier finden Sie die Trainingszeiten,
die Betreuer, aktuell spielende Mannschaften, Fotos von der Jugend und Informationen für anstehnde Tuniere
oder ähnliches.</p>
<center><h1>!Wichtig!</h1></center>
<hr>
<p>Der Frühling hat bekommen und somit auch der Frühlingsputz. Die Homepage der TTG-Witterschlicker Jugend hat deswegen auch ein
leicht neues Design bekommen. Die Reiter sind von oben nach rechts gerutsch und die News sind nun links unter dem Reiter Aktuelles oder
<a href="aktuelles.html">hier</a> zu finden. Außerdem wurde Betreuung in Betreuer umbenannt. In den nächsten Tagen werden hier und da noch ein paar Schönheitskorrekturen
vorgenommen aber wir hoffen das stört Sie nicht.</p>
<center><h1>1. Warm UP Tischtennis-Tunier</h1></center>
<hr>
In der Zeit vom 14.-16.8.2015 findet in der Turnhalle Oedekoven das 1. Warm UP Tischtennis-Tunier von der TTG-Witterschlick statt.
Natürlich kann die Jugend auch an diesem Tunier teilnehmen. Weitere Infos entnehmen Sie bitte dem Flyer.<br>
<a href="img/1.Witterschlicker+Warm+up+Tischtennis-Turnier.pdf">Link zum Flyer</a>
</div>
<div class="footer">
(C)2015 | TT-in-Witterschlick.de | <a href="impressum.html">Impressum</a> | <a href="kontakt.html">Kontakt</a>
</div>
</div>
</body>
</html>CSS:
Code:
@font-face {
font-family:roboto;
src:url('Roboto-Regular.ttf');
}
body{
background-image: url(img/background.JPG);
}
.header{
border-radius: 10px ;
box-shadow:#585858 0 0 3px 3px;
margin-right: 5.5em;
margin-left: 5.5em;
width: 62.4%;
background:url(img/header.JPG);
display: inline-block;
margin-bottom: 1em;
margin-top: 1em;
}
.schlaeger-links{
background-color: transparent;
float: left;
display: inline-block;
}
.logo{
width:83%;
height:20%;
padding-bottom: 1em;
margin-right: auto;
margin-left: auto;
}
.schlaeger-rechts{
background-color: transparent;
float: right;
display: inline-block;
}
.container{
border-radius: 10px ;
background-color: blue;
margin-right: 0.5%;
margin-left: 0.5%;
box-shadow:#585858 0 0 3px 3px;
}
.menu{
background-color: white;
border-color: black;
border-radius: 10px ;
text-align: center;
font-family: roboto;
color:white;
width:150px;
text-shadow:#A4A4A4 3px 1px 3px;
box-shadow:#585858 0 0 3px 3px;
margin-bottom: 1%;
margin-top: 0.5%;
margin-left: 0.5%;
margin-right: 1%;
padding-right: 10px;
float: left;
}
.hover:hover{
font-weight: bold;
text-decoration: underline;
}
.link{
height: 36px;
width: 165px;
margin-top: 0.25em;
margin-bottom: 0.25em;
}
.seite{
box-shadow:#585858 0 0 3px 3px;
border-color: black;
border-radius: 10px ;
background-color: white;
margin-left: 11em;
margin-right: 0.5%;
margin-bottom: 1%;
height: 30px;
}
.content{
box-shadow:#585858 0 0 3px 3px;
border-color: black;
border-radius: 10px ;
background-color: white;
margin-left: 9.6em;
margin-bottom: 1em;
font-size:18px;
text-align:left;
font-family:roboto;
}
.footer{
margin-bottom: 1%;
margin-right: 0.5em;
margin-left: 0.5em;
margin-bottom: 10em;
clear: left;
padding-top:15px;
padding-bottom:10px;
text-align: center;
color: #222222;
font-family: roboto;
border-color: white;
background-color: white;
border-radius: 10px;
box-shadow:#585858 0 0 3px 3px;
}
h1{
font-family:roboto;
font-size:25px;
font-weight:bold;
color:#2E2E2E;
text-decoration:none;
margin:0px;
padding:0px;
text-shadow:#6E6E6E 2px 3px 2px;
}
h2{
font-family:roboto;
font-size:22px;
font-weight:normal;
text-decoration:underline;
margin:0px;
margin-top:10px;
padding:0px;
}
h3{
font-family:roboto;
font-weight:bold;
font-size:20px;
margin:0px;
margin-top:10px;
padding:0px;
}
info{
color:#1C1C1C;
font-family:Lucida Console;
font-size:13px;
}
center{
text-align: center;
}Ich weiß es sieht noch nicht ganz gut aus aber ich bin ja noch im Aufbau. Ich hoffe ihr versteht meine Fragen und könnt mir schnell helfen.
MFG Xxxflo1901xxX
