logo in 1 kolom header plaatsen.

Status
Niet open voor verdere reacties.

Hannes57

Gebruiker
Lid geworden
23 apr 2016
Berichten
173
Hallo Allemaal,

Ik ben bezig met het maken v.e. site over mijn hobby. Ik heb een template gedownload met een externe css. Ik ben wat voor mijzelf aan het rommelen geweest met bijv. tabellen. Maar...Ik wil een logo plaatsen, links van de site titel. Het logo staat in een aparte map.vb tabellen.png
Let NIET op de titel en de rest, dat moet ik nog aanpassen.

De taal is XHTML Trans. Ok, hoe krijg ik de logo, links naast de titel? Moet ik een div aanmaken of wat anders...? Hoe krijg ik in de css map?

Wie oh wie kan mij helpen.? Of is het beter om in HTML5 een nieuwe te maken? Ik heb geen idee wat beter is.
Maar ik wil niet knoeien aan de lay-out, die vindt ik mooi er uit zien.

Hannes.
vb tabellen.png
 
Dit is het minimum. Verder kan ik niet helpen omdat je geen code geeft.
Code:
HTML

<div id="header">
    <div id="logo">
        <img src="images/logo.jpg" alt="" />
    </div>
    <div id="sitename">
        <h1><a href="index.html">My LiBlueen</a></h1>
    </div>
</div>

CSS

#header {
    width: 100%;
}
#logo {
    float: left;
    width: 25%;
}
#logo img {
    display: block;
    border: 0;
    width: 100%;
    height: auto;
}
#sitename {
    float: left;
    width: 75%;
}
#sitename a {
    display: block;
    text-decoration: none;
}
Suc6 met je website.
 
Bron;

sorry voor mijn late antwoord. Zat op Spa-Francorchamps.... Ik zal dit eens proberen. Misschien is dit het goede. Ik doe wat verkeerd en zag in jouw code dat het anders is dan wat ik deed. Misschien was dat de fout. Normaal gebruik ik een WYSIWYG met tabellen. Dit was een template met css en xhtml trans.

Dank voor je moeite.

H.
 
(x)html is niet meer van deze tijd. Het is makkelijk om te zetten naar html5.
Heb je een linkje of anders als bijlage de html/css bestanden?

Voor wat betreft tabellen. Die worden niet goed weergegeven op smartphone.
 
Voor Bron

De tekst html en css.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><title>The Liblueen design</title>




<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<link rel="stylesheet" href="styles.css" /></head><body>
<div id="conteneur">
<div id="header">HKV Plastic aircraft model museum<br />
</div>

<div id="haut">
<ul class="menuhaut">
<li><a href="">OpenWebDesign</a></li>
<li><a href="">W3C Standards</a></li>
<li><a href="">Fine design</a></li>
<li><a href="">Flexibility</a></li>
<li><a href="">Colors</a></li>
<li><a href="">An other link</a></li>
</ul>
</div>

<div id="centre">
<h1>HKV plastic aircraft model museum<br />
</h1>
<h2>Plastic aircraft models in 1/72 and 1/48 scale<br />
</h2>
<p>This design is released under the Creative Common Attribution Licence</p>
<h2>Respect the standards</h2>
<p>Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Aenean tellus
libero, suscipit at, tincidunt eget, aliquam vitae, arcu. Nunc quam
dolor, facilisis hendrerit, <a href="">ultricies</a> id, <a href="">imperdiet</a>
id, libero. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos hymenaeos. Suspendisse potenti. Cras sit amet
felis eu leo placerat scelerisque. Cras orci pede, eleifend nec,
iaculis blandit, ullamcorper congue, odio. Quisque laoreet urna nec
urna. Nunc sit amet purus sit amet felis rutrum hendrerit. Aliquam
fermentum molestie eros. Cras nec elit varius augue eleifend sagittis.</p>
<p>In
sodales ultrices enim. Mauris nisl. Fusce vel urna nec magna hendrerit
auctor. Nulla euismod. Nulla bibendum. In mattis, sem nec eleifend
pellentesque, mi massa ornare tortor, ac fringilla augue augue nec mi.
Quisque viverra quam consectetuer leo. Ut leo augue, aliquam non,
vestibulum non, dignissim nec, sapien. Proin sodales. Quisque in orci.
Sed erat est, lacinia ut, varius sit amet, ullamcorper vitae, dui.
Nullam malesuada risus ac <a href="">lacus</a>. Suspendisse hendrerit.
Integer placerat interdum nulla. Pellentesque vel tellus eget turpis
scelerisque venenatis. Nullam adipiscing risus at massa.</p>
<h2>Free design</h2>
<p>Nunc
bibendum sapien. Ut ligula sapien, dignissim vitae, sollicitudin quis,
egestas scelerisque, risus. Vestibulum aliquam pretium ante. Nunc sem
mi, gravida in, sagittis quis, ullamcorper accumsan, ligula. Aliquam
convallis, nibh at tristique tempor, velit orci sollicitudin tellus, in
hendrerit purus nibh eu eros. Nam luctus turpis ac tortor. <a href="">Proin</a> et <a href="">elit</a>. Etiam varius eleifend velit. Morbi convallis semper orci.</p>
<h2>Some lists</h2>
<h3>An ul list</h3>
<ul>
<li>First element</li>
<li>Second element</li>
</ul>
<h3>An ol list</h3>
<ol>
<li>First element</li>
<li>Second element</li>
</ol>
</div>
<div id="pied">Design© 2017 hkv</div>
</div>
</body></html>

De CSS.

#centre {
border-style: none solid;
border-color: -moz-use-text-color #202020;
border-width: 0 1px;
padding: 24px;
color: #000000;
}
#conteneur {
margin: 16px 10%;
min-width: 960px;
background-color: #fafafa;
width: 80%;
position: absolute;
}
#haut {
background-color: #666666;
height: 38.4px;
max-height: 38.4px;
}
#header {
border: 1px solid #fafafa;
background-color: #990000;
color: #fafafa;
font-size: 32px;
height: 80px;
padding-left: 58px;
padding-top: 20px;
}
#pied {
border-style: none solid solid;
border-color: -moz-use-text-color #202020 #202020;
border-width: 0 1px 1px;
padding: 0.5em;
text-align: left;
background-color: #990000;
color: white;
}
.menuhaut {
margin: 0;
padding: 0;
font-size: 1em;
list-style-type: none;
}
.menuhaut a {
margin: 0 0.4em;
color: #fafafa;
text-decoration: none;
}
.menuhaut a:hover {
color: #ffff00;
text-decoration: none;
}
.menuhaut li {
border-right: 1px solid #ffffff;
margin: 0;
padding: 0.6em 10px;
display: inline;
float: left;
}
a {
color: #000000;
text-decoration: underline;
}
body {
background-color: #cdcdcd;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 0.75em;
}
h1 {
margin: 0.5em 0.5em 1em 0;
font-size: 1.6em;
}
h2 {
margin: 0.8em 0.5em 0.3em 0.6em;
font-size: 1.2em;
}
h3 {
margin: 0.8em 0.5em 0.3em 0.8em;
font-size: 1.1em;
}
h4 {
margin: 0.7em 0.5em 0.3em 1em;
font-size: 1em;
}
h5 {
margin: 0.6em 0.5em 0.2em 1.5em;
font-size: 0.9em;
}
p {
margin: 1px 0.5em 0.5em 1.5em;
}
Gr. Han
 
In de bijlage is het omgezet naar html5. Als extra een responsive versie in een apart mapje ;)
 

Bijlagen

  • site1.zip
    7,8 KB · Weergaven: 37
Bron,

Dank voor je moeite en werk die je er in gestoken hebt.

Han
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan