[HTML/CSS] 2 plaatjes in center - Softwareontwikkeling

donderdag 26 november 2015 22:12

Acties:

ICT Beheerder

Topicstarter

Geachte Tweakers,

Ik moet voor school een website maken over Olympische Spelen in 2016.
Ik wil graag 2 plaatjes in 1 positie hebben, waarbij de ene overlapt.
Zie voorbeeld:
Afbeeldingslocatie: http://i68.tinypic.com/2cz3brl.jpg

Afbeeldingslocatie: http://i68.tinypic.com/2cz3brl.jpg

Op dit moment ziet het eruit:
Afbeeldingslocatie: http://i64.tinypic.com/2802nnr.jpg

HTML

code:

<!doctype html>
<html lang="nl">
<head>
    <meta charset="iso-8859-1">
    <meta name="description" content="Volleybal Olympische Spelen 2016 in Rusland">
    <meta name="keywords" content="volleybal, sport, olympische spelen, Rusland, 2016">
    <meta name="author" content="DutchRedGaming">
    <title> Volleybal en Olympische Spelen 2016 </title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <section id="content">
        <header>
        <hgroup>
            <h1> Volleybal en Olympische Spelen 2016</h1>
        </hgroup>
        
        <nav>
            <ul>
                <li><a href="#top">Home</a></li>
                <li><a href="Wat is volleybal.html">Wat is volleybal</a></li>
                <li><a href="Top 10 beste landen.html">Top 10 beste landen</a></li>
                <li><a href="Spelregels.html">Spelregels</a></li>
            </ul>
            
        </nav>
            
                <div id="logo" class="container">
                    <div class="Volleyball">
                        <img src="bestanden/volleyball.png" width="514" height="514"></div>
                        <div class="Kicksave">
                        <img src="bestanden/kicksave.gif" width="200px" height="200" class="rondehoeken"></div>
                </div>
            
    </header>
        
    </section>
</body>
</html>

CSS:

code:

 html{height:98%;}
 body{height:98%;}
 
.container {
    position: relative;
}
 
.Volleyball {
    z-index: 1;
    position: center;
    width: 100px;
    height: 100px;
    border: 0px solid blue;
}

.kicksave {
    z-index: 2;
    position: center;
    width: 50px;
    height: 50px;
    border: 0px solid yellow;
}

#content{
    width:800px;
    height:98%;
    margin:0px auto;
    padding-top:1px;
    padding-left:15px;
    padding-right:15px;
    -webkit-box-shadow: 4px 4px 4px 4px blue;
    box-shadow: 4px 4px 4px 4px blue;
}

hgroup h1{
    color: rgba(0,100,255,0,7);
    front-family:serif;
    front-size:44px;
    front-weight:bold;
    text-align: center;
}

hgroup{
    background:url(bestanden/banner.png);
    background-position:right;
    background-repeat:no-repeat;
}

nav ul{
    border-top: double 3px #8e8e8e;
    text-align: center;
}


nav ul li{
    float:left;
    padding:0px 30px;
    list-style-type: none;
    border-bottom: solid 1px #8e8e8e;
}

nav ul li a{
    font-size: 20px;
    font-weight:bold;
    color: blue;
    text-decoration: none;
    text-shadow: 0 1px 1px blue;
    -webkit-border-radius:6xp;
    -moz-border-radius: 6px;
    border-radius:6px;
    
    -webkit-transition: all 1.0s ease-in-out;
    -mos-transition-:all 1.0s case-in-out;
    -o-transition-:all 1.0s ease-in-out;
    transition: all 1.0s ease-in-out;
}

nav ul li a:hover, nav ul ll a:focus
{
    color:#fff;
    background: yellow;
}

.rondehoeken{
    border-radius: 10px; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border: 3px solid #555AE0;
}

Review QNAP TS-230 NAS

donderdag 26 november 2015 22:21

Acties:

ByteMe_

code:

1	position: center;

Dat bestaat niet.

Wat jij wilt is de elementen centreren, dat kan met de code in de parent div.container

code:

1	text-align: center;

En je kunt ook de images centreren met bijv.

code:

1	margin: 0 auto;

Mijn laatste reviews: Xiaomi Mi 9T | Mpow H12

donderdag 26 november 2015 22:27

Acties:

Dutchredgaming

ICT Beheerder

Topicstarter

RonaldDesigns schreef op donderdag 26 november 2015 @ 22:21:
code:
1
  position: center;
Dat bestaat niet.

Wat jij wilt is de elementen centreren, dat kan met de code in de parent div.container
code:
1
  text-align: center;
En je kunt ook de images centreren met bijv.
code:
1
 margin: 0 auto;

Het is gedeelte opgelost, alleen de bal is weer naar rechts

Afbeeldingslocatie: http://i65.tinypic.com/otnujm.jpg

CSS:

code:

.container {
    text-align: center;
}
 
.Volleyball {
    z-index: 1;
    margin: 0 auto;
    width: 100px;
    height: 100px;
    border: 0px solid blue;
}

.kicksave {
    z-index: 2;
    margin: 0 auto;
    width: 50px;
    height: 50px;
    border: 0px solid yellow;
}

Voor de volledige code, zie TS

Review QNAP TS-230 NAS

donderdag 26 november 2015 22:41

Acties:

ByteMe_

Heb je een voorbeeld online staan?

Daarnaast, is het een optie om de twee plaatjes als 1 plaatje gebruiken in de achtergrond? Dat scheelt ook in codewerk. Of gebruik je ze apart op andere pagina's?

Dan zou je dit kunnen plaatsen:

code:

.container {
    background-image:url('plaatje.png');
    background-position: 50px 50px; /* XPOS YPOS */
}

Dan kan je dmv de background-position zelf de de locatie bepalen met slechts 1 plaatje (kan ook in % overigens) en vallen de plaatjes nooit uit elkaar.

Mijn laatste reviews: Xiaomi Mi 9T | Mpow H12

vrijdag 27 november 2015 08:29

Acties:

Dutchredgaming

ICT Beheerder

Topicstarter

RonaldDesigns schreef op donderdag 26 november 2015 @ 22:41:
Heb je een voorbeeld online staan?

Daarnaast, is het een optie om de twee plaatjes als 1 plaatje gebruiken in de achtergrond? Dat scheelt ook in codewerk. Of gebruik je ze apart op andere pagina's?

Dan zou je dit kunnen plaatsen:
code:
1
2
3
4
.container {
    background-image:url('plaatje.png');
    background-position: 50px 50px; /* XPOS YPOS */
}
Dan kan je dmv de background-position zelf de de locatie bepalen met slechts 1 plaatje (kan ook in % overigens) en vallen de plaatjes nooit uit elkaar.

kicksave.gif is bewegend plaatje

Review QNAP TS-230 NAS

vrijdag 27 november 2015 11:57

Acties:

Creepy

Tactical Espionage Splatterer

Dus wat had je nu zelf al geprobeerd om dit op te lossen? Nog helemaal niks? Dat is toch wel een beetje gek voor een schoolopdracht vind je niet? Het is natuurlijk niet de bedoeling dat wij jouw schoolopdracht gaan regelen voor je.

"I had a problem, I solved it with regular expressions. Now I have two problems". That's shows a lack of appreciation for regular expressions: "I know have _star_ problems" --Kevlin Henney

vrijdag 27 november 2015 20:55

Acties:

Dutchredgaming

ICT Beheerder

Topicstarter

Creepy schreef op vrijdag 27 november 2015 @ 11:57:
Dus wat had je nu zelf al geprobeerd om dit op te lossen? Nog helemaal niks? Dat is toch wel een beetje gek voor een schoolopdracht vind je niet? Het is natuurlijk niet de bedoeling dat wij jouw schoolopdracht gaan regelen voor je.

Ik heb hiervoor wel gegoogled en ik kwam op de resultaat die je zag in TS.

Ondertussen heb ik de .gif behouden en volleybal verwijderd.

Dat betekent niet dat ik niks heb geleerd, ik heb meer geleerd en daarom wil ik jullie bedanken!

Review QNAP TS-230 NAS

zaterdag 28 november 2015 16:26

Acties:

DJMaze

Simpel en niet ideaal

Cascading Stylesheet:

1
2
3

.kicksave {
    margin-left: 20px;
}

Andere is inderdaad de volleybal als background-image, maar beide kan ook!

Cascading Stylesheet:

.container {
    background-image: url(bestanden/kicksave.gif), url(bestanden/volleyball.png);
    background-position:center center;
}

[ Voor 67% gewijzigd door DJMaze op 28-11-2015 16:30 ]

Maak je niet druk, dat doet de compressor maar

zaterdag 28 november 2015 16:35

Acties:

Marc3l

Zoiets?

code:

.container {
    text-align: center;
}
 
.Volleyball {
   display: table;
  width: 100%;
}

.kicksave {
   display: table-cell;
  text-align: center;
  vertical-align: middle;
}

maandag 30 november 2015 22:54

Acties:

sanderaernouts

Wat ik zelf 'n handige truc vind voor centreren is absoluut positioneren binnen bijv een relatieve gepositioneerde div.

HTML:
<div class="wrapper">
<div class= "center">
content
</div>
<div>

CSS:
.container {
position: relative;
width: 100%;
height: 100%
}

.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}

Wat je hier doet is een div van 100% bij 100% neerzetten (is maar even als voorbeeld!) en vervolgens duw je de linkerbovenhoek van je .center div naar het midden van deze div. Nu staat de linker bovenhoek in het midden, maar dat wil je niet, dus gebruik je transform(-50,-50) om de .center div 50% van zijn breedte naar links en 50% van zijn hoogte omhoog te duwen. Daardoor staat je div netjes in het midden.

Voordeel is dat je div groter/kleiner kan worden, maar deze CSS zorgt er altijd voor dat het in het midden (van de container div) staat.

*transform is uit het hoofd nog niet volledig geïmplementeerd door de browsers dus voor sommige vendors moet je nog prefixen

maandag 30 november 2015 23:01

Acties:

endness

Voor de laatste versies van alle grote browsers is prefixen niet meer nodig. Voor een schoolopdracht is het misschien wel zo netjes het even te doen, vooral de 'ms' variant. Dat is hoogstwaarschijnlijk de enige die het nodig heeft, omdat mensen die op IE9 zitten niet automatisch geupdate worden.