/    Sign up×
Community /Pin to ProfileBookmark

css problem with text and image

Hello,

I have a problem with my testpage, i would have the text and the image as a block, side by side. But it isn’t working. ?
this is my html code:

[code=html]
<!DOCTYPE html>
<html lang=”de_DE”>
<head>
<meta charset=”UTF-8″>
<link rel=”stylesheet” href=”base.css” type=”text/css”>
</head>
<body>
<div id=”mainpage_text”>
<img class=”theme21″ src=”https://www.plausch-cafe.de/ow_userfiles/themes/theme_image_21.png”/><h6 class=”mainpageh6″>Treffe Leute aus deiner Nähe!</h6>
<span class=mainpageP>
Plausch-Café ist deine Online Community für
Flensburg & Umgebung.<br /> Lerne spontan neue
Leute aus deiner Nähe kennen<br /> oder finde gezielt
Personen mit gleichen Interessen.
</span>
<img class=”theme21″ src=”https://www.plausch-cafe.de/ow_userfiles/themes/theme_image_21.png”/>
<h6 class=”mainpageh6″>Werbe- und frustfrei!</h6>
<span class=”mainpageP”>
Durch maximalen Datenschutz durch SSL-
Verschlüssung<br />persönlichen von unserem
Moderatoren-Team geprüften Profilen wird<br />
das Surfen auf Plausch-Cafe.de zu einem frust-
freien Erlebnis ohne Werbung!
</span>
<img class=”theme21″ src=”https://www.plausch-cafe.de/ow_userfiles/themes/theme_image_21.png”/>
<h6 class=mainpageh6>Keine Vertragsbindung!</h6>
<span class=”mainpageP”>
Sichere Zahlung durch Paypal, mit und ohne
Konto möglich.<br/> Deine Mitgliedschaft läuft auto-matisch nach 31 Tagen ab<br /> und kann jederzeit
individuell verlängert werden.<br /> Es gibt keine
versteckten Kosten oder dauerhafte Abonnoments.
</span>
</div>
</body>
<html>
[/code]

this is my css code:

[code]
img.theme21 {
height: 48px;
width: 68px;
background-color:transparent;
float: left;
}

h6.mainpageh6 {
position: relative;
top: -40px;
left: 80px;
padding:0px;
margin:30px 0px;
border:none;
color: red;
font-family:arial;
font-size: 1em;
font-style: bold;
background-color:transparent;
display:block;
clear:both;
}

span.mainpageP {
position: relative;
left: 80px;
top: -70px;
padding:0px;
margin:0px;
border:none;
font-family:arial;
font-size: 1em;
background-color:transparent;
color: black;
display:block;
clear:both;
}
[/code]

Regards,

to post a comment
CSS

2 Comments(s)

Copy linkTweet thisAlerts:
@Kevin2Mar 11.2015 — I'm not quite sure the following is what you want, but try it and see.
[code=html]<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Plausch-Caf&eacute;</title>
<link rel="stylesheet" href="base.css">
</head>
<body>
<div id="mainpage_text">

<section>
<img class="theme21" src="https://www.plausch-cafe.de/ow_userfiles/themes/theme_image_21.png" alt="coffee cup graphic">
<div class="textcontainer">
<h6 class="mainpageh6">Treffe Leute aus deiner N&auml;he!</h6>
<p class="mainpageP">
Plausch-Caf&eacute; ist deine Online Community f&uuml;r Flensburg & Umgebung. Lerne spontan neue Leute aus deiner N&auml;he kennen oder finde gezielt Personen mit gleichen Interessen.
</p>
</div>
</section>

<section>
<img class="theme21" src="https://www.plausch-cafe.de/ow_userfiles/themes/theme_image_21.png" alt="coffee cup graphic">
<div class="textcontainer">
<h6 class="mainpageh6">Werbe- und frustfrei!</h6>
<p class="mainpageP">
Durch maximalen Datenschutz durch SSL- Verschl&uuml;ssungpers&ouml;nlichen von unserem Moderatoren-Team gepr&uuml;ften Profilen wird das Surfen auf Plausch-Cafe.de zu einem frust- freien Erlebnis ohne Werbung!
</p>
</div>
</section>

<section>
<img class="theme21" src="https://www.plausch-cafe.de/ow_userfiles/themes/theme_image_21.png" alt="coffee cup graphic">
<div class="textcontainer">
<h6 class="mainpageh6">Keine Vertragsbindung!</h6>
<p class="mainpageP">
Sichere Zahlung durch Paypal, mit und ohne Konto m&ouml;glich. Deine Mitgliedschaft l&auml;uft auto-matisch nach 31 Tagen ab und kann jederzeit individuell verl&auml;ngert werden. Es gibt keine versteckten Kosten oder dauerhafte Abonnoments.
</p>
</div>
</section>

</div>
</body>
</html>

[/code]

base.css:
.theme21 {
height: 48px;
width: 68px;
}

.textcontainer {
display: inline-block;
margin-left: 80px;
width: 55%;
}

.mainpageh6 {
color: red;
font-family: arial;
font-size: 1em;
font-style: bold;
}

.mainpageP {
margin-top: -2em;
font-family: arial;
font-size: 1em;
color: black;
}
Copy linkTweet thisAlerts:
@coderunnerMar 11.2015 — I didn't understand your question quite well so I hope you mean to add the 3 topics next to each other, if so try this ....

[code=html]<!DOCTYPE html>
<html lang="de_DE">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="base.css" type="text/css">
</head>
<body>
<div id="mainpage_text">

<div class="mainpage">
<img class="theme21" src="https://www.plausch-cafe.de/ow_userfiles/themes/theme_image_21.png" />
<span class="mainpageh6">Treffe Leute aus deiner Nähe!</span>
<div class="mainpageP">
Plausch-Café ist deine Online Community für Flensburg & Umgebung.<br />
Lerne spontan neue Leute aus deiner Nähe kennen
oder finde gezielt Personen mit gleichen Interessen.
</div>
</span>
</div>

<div class="mainpage">
<img class="theme21" src="https://www.plausch-cafe.de/ow_userfiles/themes/theme_image_21.png" />
<span class="mainpageh6">Werbe- und frustfrei!</span>
<div class="mainpageP">
Durch maximalen Datenschutz durch SSL-Verschlüssung
persönlichen von unserem Moderatoren-Team geprüften Profilen wird
das Surfen auf Plausch-Cafe.de zu einem frust-freien Erlebnis ohne Werbung!
</div>
</span>
</div>

<div class="mainpage">
<img class="theme21" src="https://www.plausch-cafe.de/ow_userfiles/themes/theme_image_21.png" />
<span class="mainpageh6">Keine Vertragsbindung!</span>
<div class="mainpageP">
Sichere Zahlung durch Paypal, mit und ohne Konto möglich.<br/>
Deine Mitgliedschaft läuft auto-matisch nach 31 Tagen ab
und kann jederzeit individuell verlängert werden.<br />
Es gibt keine versteckten Kosten oder dauerhafte Abonnoments.
</div>
</span>
</div>


</div>
</body>
<html>[/code]


css code
[CODE] .mainpage {
width:33%;
float:left;
}

.theme21 {
height: 48px;
width: 68px;
background-color:transparent;
vertical-align: text-top
}

.mainpageh6{
padding:0px;
color: red;
font-family:arial;
font-size: 1em;
font-weight: bold;
background-color:transparent;
}

.mainpageP {
margin:-20px 20px 0px 75px;;
font-family:arial;
font-size: 1em;
background-color:transparent;
color: black;
text-align: justify;
}[/CODE]


Success
×

Success!

Help @Bonekit spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.15,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...