Webwereld

koptekst omhoog krijgen

Gestart doorJordel10 reacties262 weergaven
Log in om mee te praten

11 berichten · pagina 1 van 1

Jordel

Lid · Topicstarter

Berichten
53
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
Beste leden,

ik wil de tekst naar boven krijgen, hierbij een link waar je kan zien waar het om gaat.
http://imgur.com/PiLtFg5

ik geef jullie ook een stukje code.
het gaat om de section1content die tekst die erachter staat moet boven naast de slideshow komen.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Vermeulen Renovatie en Onderhoud</title>
<link href="styles/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery.cycle.all.js"></script>
<script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/montserrat:n4:default;source-sans-pro:n2:default.js" type="text/javascript"></script>
<script>jQuery(document).ready(function($) {
$(#slideshow).cycle({ fx: fade});
});</script>
</head>

<body>


<!-- Header content -->
<header>

  <div class="profilePhoto"> 
    <!-- Profile photo --> 
    <img src="images/profilephoto.png" alt="sample"> </div>
  

  <!-- Identity details -->
  <section class="profileHeader">
    <h1>Vermeulen Renovatie en Onderhoud</h1>
    <h3>Kunnen wij het maken? Nou en of!</h3>
    <hr>
    
<aside class="socialNetworkNavBar">
  
  <div class="socialNetworkNav">
    <a href="index.html"><h3>Home</h3>
      <img src="images/social1.png" alt=""> </a></div>
  
  <div class="socialNetworkNav"> 
    <a href="about.html"><h3>Over ons</h3>
      <img src="images/social2.png" alt=""></a></div>
  
  <div class="socialNetworkNav">
    <a href="werk.html"><h3>Werk</h3>
      <img src="images/social3.png" alt=""></a></div>
  
  <div class="socialNetworkNav">
    <a href="contact.html"><h3>Contact</h3>
      <img src="images/social4.png" alt="" ></a></div>
</aside>
    </section>
</header>
<!-- content -->
<section class="mainContent"> 
  <!-- Contact details -->
  <section class="section1">
    <h2 class="sectionTitle">Kop 1</h2><br>
<br> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. </br>
    <hr class="sectionTitleRule">
    <hr class="sectionTitleRule2"><br>
           <div id="slideshow">
    <img src="images/plaatje1.png" alt="" width="240" height="240" >
    <img src="images/plaatje2.png" alt="" width="240" height="240" >
    </div>
    <div class="section1Content"><br> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. </br>
    </div>

   
</section>
  <!-- Previous experience details -->
  <section class="section2">
    <h2 class="sectionTitle">Kop 2</h2>
        <hr class="sectionTitleRule">
    <hr class="sectionTitleRule2">
    <article class="section2Content">
      <h2 class="sectionContentTitle">subkop 1</h2>
      <p class="sectionContent"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. </p>
    </article>

    <article class="section2Content">
      <h2 class="sectionContentTitle">subkop 2</h2>
      <p class="sectionContent"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. </p>
    </article>
    <!-- Replicate the above Div block to add more title and company details --> 
  
<footer>
  <hr>
  <p class="footerDisclaimer">2016-2017  Copyrights - <span>All Rights Reserved</span></p>
  <p class="footerNote">Vermeulen Renovatie en Onderhoud - <span><a href="contact.html">Contact us</a></span></p>
</footer>



</body>
</html>
0
Dylan

Lid

Berichten
14.025
Reputatie
1
Punten
0,01
Lid sinds
Laatst gezien
Ik zie de link niet
0
Luuko

Lid

Berichten
7.498
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
Wat lukt er dan niet?
0
Jordel

Lid · Topicstarter

Berichten
53
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
Dylan schreef:
Ik zie de link niet
het is geen link? ik heb een stukje code gegeven die tekst moet naast de kop komen

toevoeging op 24 januari 2016, 19:04:40:
Luuko schreef:
Wat lukt er dan niet?
die tekst moet naast de koptekst komen

toevoeging op 24 januari 2016, 19:30:19:
sorry mensen ben blond de url stond er niet bij waar het omgaat hahahahahaha!

toevoeging op 24 januari 2016, 20:08:52:
Dylan schreef:
Ik zie de link niet
link geplaats sorry
0
Dylan

Lid

Berichten
14.025
Reputatie
1
Punten
0,01
Lid sinds
Laatst gezien
display:inline?
0
Jordel

Lid · Topicstarter

Berichten
53
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
Dylan schreef:
display:inline?
moet ik anders de hele code plaatsen?
0
Luuko

Lid

Berichten
7.498
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
Jordel schreef:
Eerdere citaten tonen
Dylan schreef:
display:inline?
moet ik anders de hele code plaatsen?
doe maar
0
Jordel

Lid · Topicstarter

Berichten
53
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
Luuko schreef:
Eerdere citaten tonen
Jordel schreef:
Eerdere citaten tonen
Dylan schreef:
display:inline?
moet ik anders de hele code plaatsen?
doe maar
astu
0
Luuko

Lid

Berichten
7.498
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
Jordel schreef:
Eerdere citaten tonen
Luuko schreef:
Eerdere citaten tonen
Jordel schreef:
Eerdere citaten tonen
Dylan schreef:
display:inline?
moet ik anders de hele code plaatsen?
doe maar
astu
De css file zou ook wel handig zijn
0
Jordel

Lid · Topicstarter

Berichten
53
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
Luuko schreef:
Eerdere citaten tonen
Jordel schreef:
Eerdere citaten tonen
Luuko schreef:
Eerdere citaten tonen
Jordel schreef:
Eerdere citaten tonen
Dylan schreef:
display:inline?
moet ik anders de hele code plaatsen?
doe maar
astu
De css file zou ook wel handig zijn
Spoiler tonen
@charset "utf-8";



/* Global Styles */



body {

    margin-left: auto;

    margin-right: auto;

    width: 92%;

    max-width: 1080px;

    padding-left: 2.275%;

    padding-right: 2.275%;

    cursor:url(../images/cursor.cur), default;

}

#slideshow { 

    position: relative; 
    width: 240px; 
    height: 240px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}

/* Extra Styles */
a:link {
    text-decoration: none;
    
    color: rgba(146,146,146,1.00);
}

a:visited {
    text-decoration: none;
    
    color: rgba(146,146,146,1.00);
}

a:hover {
    text-decoration: none;
    
    color: rgba(146,146,146,1.00);
}

a:active {
    text-decoration: none;
    
    color: rgba(146,146,146,1.00);
}



/* Header */

header {

    text-align: center;

    display: block;

}

header .profileLogo .logoPlaceholder {

    background-color: rgba(208,207,207,1.00);

    width: 187px;

    text-align: center;

}

header .logoPlaceholder span {

    width: 80px;

    height: 22px;

    font-family: Montserrat, sans-serif;

    color: rgba(255,255,255,1.00);

    font-size: 30px;

    font-weight: 700;

    line-height: 53px;

}

header .profilePhoto {

    background-color: rgba(237,237,237,1.00);

    width: 259px;

    border-radius: 50%;

    height: 259px;

    clear: both;

}

header .profileHeader h1 {

    font-family: Montserrat, sans-serif;

    color: rgba(146,146,146,1.00);

    font-size: 30px;

    font-weight: 700;

    line-height: 24px;

}

header .profileHeader h3 {

    font-family: sans-serif;

    color: rgba(146,146,146,1.00);

    font-size: 16px;

    font-weight: 700;

    line-height: 24px;

}

hr {

    background-color: rgba(208,207,207,1.00);

    height: 1px;

}

header .profileHeader p {

    font-family: sans-serif;

    color: rgba(146,146,146,1.00);

    font-size: 14px;

    font-weight: 400;

    line-height: 1.8;

    overflow-y: auto;

}

header .socialNetworkNavBar {

    text-align: center;

     display: block;
    
    margin-top: 10px;
    
    margin-left: 250px;

    clear: both;
    
}

header .socialNetworkNavBar .socialNetworkNav {

    border-radius: 25%;

    cursor: pointer;

}

header .socialNetworkNavBar .socialNetworkNav img:hover {

    opacity:0.5;

}

/* Main Content sections */

.mainContent .section1 {

    display: block;

}

.section1 .sectionTitle, .section2 .sectionTitle {

    font-family: Montserrat, sans-serif;

    color: rgba(146,146,146,1.00);

    font-size: 18px;

    font-weight: 700;

    text-transform: uppercase;

}

.section1 .sectionTitleRule, .section2 .sectionTitleRule {

    margin: 0 3% 0 0;

    float: left;

    clear: both;

}

.section1 .sectionTitleRule2, .section2 .sectionTitleRule2 {

    background-color: rgba(208,207,207,1.00);

    height: 1px;

    padding: 0px;

}

.mainContent .section1 .section1Content {

    font-family: ProximaNova;

    font-size: 14px;

    font-weight: 100;

    color: rgba(208,207,207,1.00);

}

.mainContent .section1 .section1Content span {

    color: rgba(146,146,146,1.00);

    font-family: sans-serif;

}

.section2 .sectionContentTitle {

    font-family: sans-serif;

    color: rgba(146,146,146,1.00);

    font-size: 18px;

    font-weight: 700;

}



.section2 .sectionContentSubTitle {

    font-family: sans-serif;

    color: rgba(68,67,67,1.00);

    font-size: 14px;

    font-weight: 400;

}

.section2 .sectionContent {

    font-family: sans-serif;

    color: rgba(146,146,146,1.00);

    font-size: 14px;

    font-weight: 400;

    line-height: 1.8;

}

.mainContent {

    display: block;

}

.mainContent .externalResourcesNav .externalResources {

    background-color: rgba(208,207,207,1.00);

    display: inline-block;

    text-align: center;

    margin-top: 0px;

    padding-top: 3%;

    cursor: pointer;

}

.mainContent .externalResourcesNav .externalResources:hover {

    background-color: rgba(153,153,153,1.00);

}

.externalResourcesNav .externalResources a {

    font-family: Montserrat, sans-serif;

    color: rgba(255,255,255,1.00);

    font-size: 14px;

    font-weight: 400;

    line-height: 18px;

    text-decoration: none;

}

.stretch {

    content: ;

    display: inline-block;

    margin-left: 2%;

    margin-right: 2%;

}

/* Footer */

footer .footerDisclaimer {

    font-family: sans-serif;

    font-size: 14px;

    line-height: 18px;

    color: rgba(104,103,103,1.00);

    font-weight: 700;

}

footer .footerDisclaimer span {

    color: rgba(181,178,178,1.00);

    font-weight: 400;

}

footer .footerNote {

    font-family: sans-serif;

    font-size: 14px;

    line-height: 18px;

    color: rgba(104,103,103,1.00);

    font-weight: 700;

}

footer .footerNote span {

    color: rgba(181,178,178,1.00);

    font-weight: 400;

}



/* Media query for Mobile devices*/

@media only screen and (min-width : 285px) and (max-width : 480px) {

/* Header */

header {

    width: 100%;

    float: none;

}

header .profileLogo .logoPlaceholder {

    display: inline-block;

}

header .profilePhoto {

    display: inline-block;

}

header .profileHeader {

    text-align: center;

    margin-top:10%;

}

header .profileHeader p {

    text-align: justify;

}

header .socialNetworkNavBar {

    text-align: center;

    display: block;

    margin-top: 60px;

    clear: both;

    margin-bottom: 15%;

}

header .socialNetworkNavBar .socialNetworkNav {

    width: 60px;

    height: 60px;

    display: inline-block;

    margin-right: 23px;

}

/* Main content sections */

.mainContent .section1 {

    text-align: center;

    margin-bottom: 10%;

}

.section1 .section1Title, .section2 .section1Title {

    text-align: center;

}

.section1 .sectionTitleRule, .section2 .sectionTitleRule {

    width: 100%;

}

.section1 .sectionTitleRule2, .section2 .sectionTitleRule2 {

    display: none;

}

.mainContent .section1 .section1Content {

    display: inline-block;

    text-align: left;

    font-family: sans-serif;

    text-align: justify;

}

.mainContent .section2 {

    display: block;

    text-align: center;

}

.section2 .section2Content {

    margin-top: 10%;

    text-align: justify;

    margin-bottom: 10%;

}

.mainContent .externalResourcesNav {

    margin-bottom: 10%;

 

}

.mainContent .externalResourcesNav .externalResources {

    width: 100%;

    height: 35px;

}

/* Footer */

footer {

    display: block;

    text-align: center;

    font-family: sans-serif;

}

}



/* Media Query for Tablets */

@media only screen and (min-width : 481px) and (max-width : 1024px) {

/* Header */

header {

    width: 100%;

    float: none;

}

header .profileLogo .logoPlaceholder {

    display: inline-block;

    font-family: Montserrat, sans-serif;

}

header .profilePhoto {

    float: left;

    clear: both;

    margin-right: 3%;

    margin-top:5%;

}

header .profileHeader {

    text-align: left;

    margin-top:7%;

}

header .socialNetworkNavBar .socialNetworkNav {

    width: 74px;

    height: 74px;

    display: inline-block;

    margin-right: 23px;

}

/* Main content and sections */

.section1 .section1Title, .section2 .section1Title {

    text-align: center;

}

.section1 .sectionTitleRule, .section2 .sectionTitleRule {

    width: 100%;

}

.section1 .sectionTitleRule2, .section2 .sectionTitleRule2 {

    display: none;

}

.mainContent .section1 .section1Content {

    display: block;

    margin: 0% 0% 0% 20%;

    font-family: sans-serif;;

    margin-top: 5%;

    margin-bottom: 5%;

}

.mainContent .section2 {

    clear: both;

}

.section2 .section2Content {

    padding: 0px;

    margin-left: 20%;

    font-family: sans-serif;

    margin-top: 5%;

    margin-bottom: 5%;

}

.mainContent .externalResourcesNav {

    margin-left: 20%;

    margin-top: 40px;

    margin-bottom: 40px;

    text-align: center;

    padding-top: 0px;

    clear: both;

}

.mainContent .externalResourcesNav .externalResources {

    width: 199px;

    height: 48px;

    margin-top: 5%;

}

/* Footer */

footer .footerDisclaimer {

    float: left;

    margin-left: 3%;

    font-family: sans-serif;

}

footer .footerNote {

    float: right;

    margin-right: 3%;

    font-family: sans-serif;

}

}



/* Desktops and laptops  */



/* Header */

header .profileLogo .logoPlaceholder {

    float: left;

    margin-bottom: 50px;

}

header .profilePhoto {

    float: left;

    clear: both;

    margin-right: 3%;

}

header .profileHeader {

    text-align: left;

    padding-top: 10%;

}

header .socialNetworkNavBar .socialNetworkNav {

    width: 74px;

    height: 74px;

    display: inline-block;

    margin-right: 23px;

}

/* Main content sections */

.section1 .sectionTitleRule, .section2 .sectionTitleRule {

    width: 22.5%;

}

.mainContent .section1 .section1Content {

    display: block;

    margin-top: 0%;

    margin-right: 0%;

    margin-left: 26%;

    margin-bottom: 0%;

    font-family: sans-serif;

}

.mainContent .section2 {

    clear: both;

}

.section2 .section2Content {

    padding: 0px;

    margin-left: 26%;

    font-family: sans-serif;

}

.mainContent .externalResourcesNav {

    margin-top: 40px;

    margin-bottom: 40px;

    text-align: center;

    padding-top: 0px;

    clear: both;

}

.mainContent .externalResourcesNav .externalResources {

    width: 199px;

    height: 48px;

}

/* Footer */

footer .footerDisclaimer {

    float: left;

    margin-left: 3%;

    font-family: sans-serif;

}

footer .footerNote {

    float: right;

    margin-right: 3%;

    font-family: sans-serif;

}

}
0
Stef

Lid

Berichten
10.150
Reputatie
2
Punten
0,00
Lid sinds
Laatst gezien
Geef de slideshow en de tekst een float: left;
Scoreboard!
0

Jouw reactie

Deel je idee, stel een vraag of help een ander verder.

Editor laden…

Praat mee met de One2xs-community.

Inloggen om te reageren