Hallo,
ich versuche zwei Texte nebeneinander zu bekommen, was aber nicht geht ich habe es schon mit float und display:inline-block versucht. Wie mache ich außerdem, dass sich die Elemente beim Ausrichten nicht verschieben. Bitte mit Beispiel-Codes erklären. Danke im Voraus :)
hier der HTML code
ich versuche zwei Texte nebeneinander zu bekommen, was aber nicht geht ich habe es schon mit float und display:inline-block versucht. Wie mache ich außerdem, dass sich die Elemente beim Ausrichten nicht verschieben. Bitte mit Beispiel-Codes erklären. Danke im Voraus :)
hier der HTML code
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>live and let learn</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div id="header">
<blockquote>
<p>Learning is not a privilege, it's a right.</p>
</blockquote>
<div id="logo">
<h1>live and let learn</h1>
<img src="live-and-let-learn.jpg" alt="live and let learn">
</div>
</div>
<div id="content">
<div id="content-side">
<dl>
<dt><a href="services/">Services</a></dt>
<dd>Learning and facilitation through TAFE WSI</dd>
<dt><a href="learning/">Personal Learning</a></dt>
<dd>Learning from the network</dd>
<dt><a href="resources/">Resources</a></dt>
<dd>Browse through resources ...</dd>
<dt><a href="about/">About</a></dt>
<dd>What am I about? Personal interests and other stuff</dd>
</dl>
</div> <!-- content-side -->
<div id="content-main">
<h2>Please update your links!</h2>
<small>Wednesday, October 12th, 2005</small>
<p>New blog address: <a href="[URL]http://liveandletlearn.net/learning/[/URL]">
[URL]http://liveandletlearn.net/learning/[/URL]</a>
</p>
<p>During the last holidays I've been busy moving my blog from
<a href="[URL]http://www.absoludity.net/blog/[/URL]">absoludity.net</a> to
<a href="[URL]http://liveandletlearn.net/learning/[/URL]">liveandletlearn.net</a>
... why? Good question! Part of the Web Design course that I
facilitate is a client project where participants are required to
develop a site from start to finish - and i'd been a while since
I'd been through that process myself - so what better a project
for the holidays (next to my gardening project to get me <em>away</em>
from the computer)!
</p>
<p>You'll notice that the site itself is still in prototype stage,
but the blog is all up and running so I'm going to be using
liveandletlearn from now on. <strong>Please update your
bookmarks/feeds</strong>! And please give me any feedback
you've got time for at
<a href="[URL]http://liveandletlearn.net/learning/[/URL]">liveandletlearn.net</a>!
</p>
</div> <!-- content-main -->
</div> <!-- content -->
</body>
</html>
CSS Code(möglicherweise ziemlich kaputt)
body{
width:75%;
margin:0px;
padding:0px;
background-color:white;}
/*text nach links machen*/
/*bild nach links setzen*/
img{
display: inline-block;
text-align:start;
width:15%;}
#header{
font-family: 'Roboto', sans-serif;
text-align:end;
margin:50px;}
#logo h1{
font-family: 'Oswald', sans-serif;
font-size:4;
text-align:start;}
/*dt dd a*/
#content{
display: block;
width: 200px;
background-color: #dddddd;
text-decoration: none;
}
/*Links in navibar ändern*/
#content-side dl{
list-style-type: none;
font-family: 'Encode Sans Condensed', sans-serif;
}
#content-side dl a{
float:left; /*Aufzählungspunkte horizontal machen*/
padding: 8px;
text-decoration: none;
}
#content-main{
display:flex;
float:right;
width:100%;
justify-content:center;}[/code
PS ich hab außerdem Schwierigkeiten bei h1 zwei unterschiedliche Schriftarten zu machen. Das Bild wies aussehen soll ist unten angehängt.