I made 2 spans, one with a text and one with an image, but they aren't in the same line. Anyone has help?
HTML
.übersicht{
font-size: x-large;
text-align: left;
}
.bild{
text-align: right;
}
<span class="überschrift">
<h1>Übersicht</h1>
<ul>
<li>(Sir) Timothy John Berners-Lee</li>
<li>Geboren am 8. Juni 1955 in London</li>
<li>Britischer Physiker & Informatiker</li>
<li>Begründer des World Wide Web</li>
<li>Erfinder von HTML</li>
</ul>
</span>
<span class="bild">
<img src="bernerslee.png" alt="Dieses Bild ist nicht verfügbar." />
</span>
You can wrap your span inside div and add below css:
.übersicht {
font-size: x-large;
text-align: left;
}
.bild {
text-align: right;
}
.display-flex {
display: flex;
}
<div class="display-flex">
<span class="überschrift">
<h1>Übersicht</h1>
<ul>
<li>(Sir) Timothy John Berners-Lee</li>
<li>Geboren am 8. Juni 1955 in London</li>
<li>Britischer Physiker & Informatiker</li>
<li>Begründer des World Wide Web</li>
<li>Erfinder von HTML</li>
</ul>
</span>
<span class="bild">
<img src="bernerslee.png" alt="Dieses Bild ist nicht verfügbar." />
</span>
</div>
Just use float:right and float:left it will show like that
.übersicht{
font-size: x-large;
float: left;
}
.bild{
float: right;
position:relative;
bottom:110px;
}
<span class="überschrift">
<h1>Übersicht</h1>
<ul>
<li>(Sir) Timothy John Berners-Lee</li>
<li>Geboren am 8. Juni 1955 in London</li>
<li>Britischer Physiker & Informatiker</li>
<li>Begründer des World Wide Web</li>
<li>Erfinder von HTML</li>
</ul>
</span>
<span class="bild">
<img src="bernerslee.png" alt="Dieses Bild ist nicht verfügbar." />
</span>
Related
My header is fixed and when i click on a link in my navbar the header always goes over the first 114.19px of the section. How can i fix this? I want the header to navigate 114.19px over the start of the section, so i can directly see the hole section. I would be glad if u can help me! I can also use javascript and jquery if i need this for the solution!
CSS
header {
background-color: #ffcc99;
width: 100%;
margin: 0;
padding: 0;
position: fixed;
top: 0;
left: 0;
height: 114.19px;
}
section {
min-height: 100%
}
section#rec {
min-height: 60%;
}
.reccomment h6 {
padding-bottom: 3%;
padding-top: 3%;
}
.reccomment p {
text-align: center;
padding-bottom: 6%;
}
section#opti,
#costs,
#pics {
background-color: #a6a6a6;
}
HTML
<header>
<div id="logo">
<a href="#">
<h1>Barbier Delo</h1>
</a>
</div>
<nav class="nav">
<ul class="nav-links">
<li>Öffnungszeiten</li>
<li>Adresse</li>
<li>Preisliste</li>
<li>Termine</li>
<li>Kundenfotos</li>
<li>Bewertung</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="app.js">
</script>
</header>
<!--- WELCOME --->
<section id="welcome">
<div class="headings">
<h2>Willkommen bei Friseur Barbier Delo!</h2>
<p>Dies ist die Website vom Friseur Barbier Delo aus Halle. Hier finden sie Adresse, Preisliste, Öffnungszeiten und können sogar einen Termin machen. Schauen sie sich mal um!</p>
</div>
</section>
ÖFFNUNGSZEITEN +
<section id="opti">
</section>
ADRESSE
<section id="adress">
</section>
PREISLISTE
<section id="costs">
</section>
TERMIN MACHEN
<section id="date">
</section>
KUNDENFOTOS
<section id="pics">
</section>
BERWERTUNG
<section id="rec">
<div class="reccomment">
<h6>Lassen sie eine Berwertung da!</h6>
<p>Wenn ihnen der Service bei Barbier Delo gefällt oder sie Kritik zu äußern haben, dann klicken sie auf diesen Stern und lassen sie eine Berwertung da!</p>
</div>
</section>
Firstly, where did you get this decimal value of pixel for the height of the header. Try to put an integer value of the height. like height: 115px or whichever integer suits your case.
you can use something like:
window.scrollTo({
top: $0.offsetTop - headerHeight,
behavior: 'smooth'
});
here $0 is the element you want to target. For <section id="welcome" /> your code would be
window.scrollTo({
top: document.getElementById("welcome").offsetTop - headerHeight,
behavior: 'smooth'
});
Also if you need support for old browsers which do not support window.scrollTo({top: X}), you need to wrap this under try-catch and use window.scrollTo(X); in the catch.
https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo
I'm trying to left align the text on my bulletpoints (because it somehow appears centered) with this:
<div style="width: 100%;margin:0 auto;text-align:left">
<ul>
<li>Rechtsanwalt seit 2000</li>
<li>Fachanwalt für Arbeitsrecht</li>
<li>Fachanwalt für Steuerrecht</li>
<li>Abogado spanischen Rechts seit 2001</li>
<li>Zertifizierter Testamentsvollstrecker (AGT)</li>
<li>Fachberater für Unternehmensnachfolge</li>
</ul> </div> <br><br>
You see the result here: http://staging.robering-fries.de/team-member/christof-fries
It is obviously not working...
Where do I go wrong?
Thanks
Florian
Your 'li's is the elements that have text-align: center; on them. From your website:
.attorney-team-details li {
margin-right: 10px;
width: 30px;
height: 30px;
border: 1px solid #d4d4d4;
border-radius: 100%;
line-height: 28px;
text-align: center; // <==
}
so you can change this property in your shortcodes.css file, or adding text-align: left; to each li.
Please add text-align:left to li element.
<div style="width: 100%;margin:0 auto;">
<ul>
<li style="text-align:left">Rechtsanwalt seit 2000</li>
<li style="text-align:left">Fachanwalt für Arbeitsrecht</li>
<li style="text-align:left">Fachanwalt für Steuerrecht</li>
<li style="text-align:left">Abogado spanischen Rechts seit 2001</li>
<li style="text-align:left">Zertifizierter Testamentsvollstrecker (AGT)</li>
<li style="text-align:left">Fachberater für Unternehmensnachfolge</li>
</ul>
</div>
Or you can use css class and !important:
div.myAlign ul li{
text-align:left!important;
}
<div class="myAlign" style="width: 100%;margin:0 auto;">
<ul>
<li style="text-align:left">Rechtsanwalt seit 2000</li>
<li style="text-align:left">Fachanwalt für Arbeitsrecht</li>
<li style="text-align:left">Fachanwalt für Steuerrecht</li>
<li style="text-align:left">Abogado spanischen Rechts seit 2001</li>
<li style="text-align:left">Zertifizierter Testamentsvollstrecker (AGT)</li>
<li style="text-align:left">Fachberater für Unternehmensnachfolge</li>
</ul>
</div>
I've been working on a website in which you can access the information for many different songs, including artist, album, length, etc. On the homepage, I have a navigation bar fixed to the left of the screen(25% in width). It has a home link, and a link to every letter(the songs are organized in sections based on their first letter). In a perfect world, I would want all these links to fit perfectly vertical in this div, however this is not the case. When I open the website on different screens, there is always different amounts of 'excess' below the 'Z'.
The navigation bar looks a little like this:
Home
A
B
C
D
...
Z
(This is where the unused space is)
Here is my code:
html,
body {
margin: 0;
}
/* Navigation Menu Styling */
ul.main-menu {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
ul.main-menu li a {
display: block;
color: #000;
padding: 7.45px 0 7.45px 16px;
text-decoration: none;
}
ul.main-menu li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
/* Text Styling */
h1,
h2,
p {
font-family: Calibri
}
p a:link,
p a:visited {
font-family: Times New Roman;
color: black;
text-decoration: none;
}
p a:hover {
color: red;
}
<ul class="main-menu">
<li><a class="active" href="#home">Home</a>
</li>
<li>A
</li>
<li>B
</li>
<li>C
</li>
<li>D
</li>
<li>E
</li>
<li>F
</li>
<li>G
</li>
<li>H
</li>
<li>I
</li>
<li>J
</li>
<li>K
</li>
<li>L
</li>
<li>M
</li>
<li>N
</li>
<li>O
</li>
<li>P
</li>
<li>Q
</li>
<li>R
</li>
<li>S
</li>
<li>T
</li>
<li>U
</li>
<li>V
</li>
<li>W
</li>
<li>X
</li>
<li>Y
</li>
<li>Z
</li>
</ul>
<div style="margin-left:25%;padding:1px 16px;height:1000px;">
<h1 id="home">Welcome To Name That Artist</h2>
<p> You can find information about a song from the wide selection we offer.</p>
<h3>Use the navigation bar to jump to a letter or search for a specific song.</h3>
<hr id="a_songs"/><p align="center">A</p><hr/>
<div>
<p>
<a id="all_of_me_john_legend" href="songs/a/All_Of_Me_John_Legend.html">All Of Me - John Legend</a>
</p>
</div>
<hr id="b_songs"/><p align="center">B</p><hr/>
<div>
<p>
<a id="bad_blood_bastille" href="songs/b/Bad_Blood_Bastille.html">Bad Blood - Bastille</a>
</p>
</div>
<hr id="c_songs"/><p align="center">C</p><hr/>
<div>
<p>
<a id="cake_by_the_ocean_dnce" href="songs/c/Cake_By_The_Ocean_DNCE.html">Cake By The Ocean - DNCE</a>
</p>
</div>
<hr id="d_songs"/><p align="center">D</p><hr/>
<div>
<p>
<a id="dont_stop_believin_journey" href="songs/d/Dont_Stop_Believin_Journey.html">Don't Stop Believin' - Journey</a>
</p>
</div>
<hr id="e_songs"/><p align="center">E</p><hr/>
<div>
<p>
<a id="eye_of_the_tiger_survivor" href="songs/e/Eye_Of_The_Tiger_Survivor.html">Eye Of The Tiger - Survivor</a>
</p>
</div>
<hr id="f_songs"/><p align="center">F</p><hr/>
<div>
<p>
<a id="feel_good_robin_thicke" href="songs/f/Feel_Good_Robin_Thicke.html">Feel Good - Robin Thicke</a>
</p>
</div>
<hr id="g_songs"/><p align="center">G</p><hr/>
<div>
<p>
<a id="geronimo_sheppard" href="songs/g/Geronimo_Sheppard.html">Geronimo - Sheppard</a>
</p>
</div>
<hr id="h_songs"/><p align="center">H</p><hr/>
<div>
<p>
<a id="here_alessia_cara" href="songs/h/Here_Alessia_Cara.html">Here - Alessia Cara</a>
</p>
</div>
<hr id="i_songs"/><p align="center">I</p><hr/>
<div>
<p>
<a id="i_write_sins_not_tragedies_panic_at_the_disco" href="songs/i/I_Write_Sins_Not_Tragedies_Panic_At_The_Disco.html">I Write Sins Not Tragedies - Panic! At The Disco</a>
</p>
</div>
<hr id="j_songs"/><p align="center">J</p><hr/>
<div>
<p>
<a id="just_give_me_a_reason_pink" href="songs/j/Just_Give_Me_A_Reason_Pink.html">Just Give Me A Reason - P!nk</a>
</p>
</div>
<hr id="k_songs"/><p align="center">K</p><hr/>
<div>
<p>
<a id="kill_of_the_night_gin_wigmore" href="songs/k/Kill_Of_The_Night_Gin_Wigmore.html">Kill Of The Night - Gin Wigmore</a>
</p>
</div>
<hr id="l_songs"/><p align="center">L</p><hr/>
<div>
<p>
<a id="latch_disclosure" href="songs/l/Latch_Disclosure.html">Latch - Disclosure</a>
</p>
</div>
<hr id="m_songs"/><p align="center">M</p><hr/>
<div>
<p>
<a id="me_and_my_broken_heart_rixton" href="songs/m/Me_And_My_Broken_Heart_Rixton.html">Me And My Broken Heart - Rixton</a>
</p>
</div>
<hr id="n_songs"/><p align="center">N</p><hr/>
<div>
<p>
<a id="the_nights_avicci" href="songs/n/The_Nights_Avicci.html">The Nights - Avicci</a>
</p>
</div>
<hr id="o_songs"/><p align="center">O</p><hr/>
<div>
<p>
<a id="on_my_mind_ellie_goulding" href="songs/o/On_My_Mind_Ellie_Goulding.html">On My Mind - Ellie Goulding</a>
</p>
</div>
<hr id="p_songs"/><p align="center">P</p><hr/>
<div>
<p>
<a id="paradise_coldplay" href="songs/p/Paradise_Coldplay.html">Paradise - Coldplay</a>
</p>
</div>
<hr id="q_songs"/><p align="center">Q</p><hr/>
<div>
<p>
</p>
</div>
<hr id="r_songs"/><p align="center">R</p><hr/>
<div>
<p>
<a id="rather_be_clean_bandit" href="songs/r/Rather_Be_Clean_Bandit.html">Rather Be - Clean Bandit</a>
</p>
</div>
<hr id="s_songs"/><p align="center">S</p><hr/>
<div>
<p>
<a id="secrets_coldplay" href="songs/s/Secrets_Coldplay.html">Secrets - Coldplay</a>
</p>
</div>
<hr id="t_songs"/><p align="center">T</p><hr/>
<div>
<p>
<a id="this_is_how_we_do_katy_perry" href="songs/t/This_Is_How_We_Do_Katy_Perry.html">This Is How We Do - Katy Perry</a>
</p>
</div>
<hr id="u_songs"/><p align="center">U</p><hr/>
<div>
<p>
<a id="uma_thurman_fall_out_boy" href="songs/u/Uma_Thurman_Fall_Out_Boy.html">Uma Thurman - Fall Out Boy</a>
</p>
</div>
<hr id="v_songs"/><p align="center">V</p><hr/>
<div>
<p>
<a id="victorious_panic_at_the_disco" href="songs/v/Victorious_Panic_At_The_Disco.html">Victorious - Panic! At The Disco</a>
</p>
</div>
<hr id="w_songs"/><p align="center">W</p><hr/>
<div>
<p>
<a id="want_to_want_me_jason_derulo" href="songs/w/Want_To_Want_Me_Jason_Derulo.html">Want To Want Me - Jason Derulo</a>
</p>
</div>
<hr id="x_songs"/><p align="center">X</p><hr/>
<div>
<p>
<a id="xo_the_eden_project" href="songs/x/XO_The_Eden_Project.html">XO - The Eden Project</a>
</p>
</div>
<hr id="y_songs"/><p align="center">Y</p><hr/>
<div>
<p>
<a id="you_know_you_like_it_dj_snake" href="songs/y/You_Know_You_Like_It_DJ_Snake.html">You Know You Like It - DJ Snake</a>
</p>
</div>
<hr id="z_songs"/><p align="center">Z</p><hr/>
<div>
<p>
</p>
</div>
</div>
You may use display:flexon ul and flex:1; on li, so they spray evenly on the whole area avalaible (or shrink on themselves).
edit : added an extra level of flexbox to wrap all letters at screen
snippet updated and DEMO to play with and fork
html,
body {
margin: 0;
}
/* Navigation Menu Styling */
ul.main-menu {
display: flex;
flex-flow: column wrap;
}
ul.main-menu li {
flex: 1;
display:flex;
align-items:center;
}
ul.main-menu li a {
padding: 0.25em 0.5em;
flex:1;
}
/* end flex model */
ul.main-menu {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
ul.main-menu li a {
display: block;
color: #000;
text-decoration: none;
}
ul.main-menu li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
/* Text Styling */
h1,
h2,
p {
font-family: Calibri
}
p a:link,
p a:visited {
font-family: Times New Roman;
color: black;
text-decoration: none;
}
p a:hover {
color: red;
}
<ul class="main-menu">
<li><a class="active" href="#home">Home</a>
</li>
<li>A
</li>
<li>B
</li>
<li>C
</li>
<li>D
</li>
<li>E
</li>
<li>F
</li>
<li>G
</li>
<li>H
</li>
<li>I
</li>
<li>J
</li>
<li>K
</li>
<li>L
</li>
<li>M
</li>
<li>N
</li>
<li>O
</li>
<li>P
</li>
<li>Q
</li>
<li>R
</li>
<li>S
</li>
<li>T
</li>
<li>U
</li>
<li>V
</li>
<li>W
</li>
<li>X
</li>
<li>Y
</li>
<li>Z
</li>
</ul>
<div style="margin-left:25%;padding:1px 16px;height:1000px;">
<h1 id="home">Welcome To Name That Artist</h2>
<p> You can find information about a song from the wide selection we offer.</p>
<h3>Use the navigation bar to jump to a letter or search for a specific song.</h3>
<hr id="a_songs"/><p align="center">A</p><hr/>
<div>
<p>
<a id="all_of_me_john_legend" href="songs/a/All_Of_Me_John_Legend.html">All Of Me - John Legend</a>
</p>
</div>
<hr id="b_songs"/><p align="center">B</p><hr/>
<div>
<p>
<a id="bad_blood_bastille" href="songs/b/Bad_Blood_Bastille.html">Bad Blood - Bastille</a>
</p>
</div>
<hr id="c_songs"/><p align="center">C</p><hr/>
<div>
<p>
<a id="cake_by_the_ocean_dnce" href="songs/c/Cake_By_The_Ocean_DNCE.html">Cake By The Ocean - DNCE</a>
</p>
</div>
<hr id="d_songs"/><p align="center">D</p><hr/>
<div>
<p>
<a id="dont_stop_believin_journey" href="songs/d/Dont_Stop_Believin_Journey.html">Don't Stop Believin' - Journey</a>
</p>
</div>
<hr id="e_songs"/><p align="center">E</p><hr/>
<div>
<p>
<a id="eye_of_the_tiger_survivor" href="songs/e/Eye_Of_The_Tiger_Survivor.html">Eye Of The Tiger - Survivor</a>
</p>
</div>
<hr id="f_songs"/><p align="center">F</p><hr/>
<div>
<p>
<a id="feel_good_robin_thicke" href="songs/f/Feel_Good_Robin_Thicke.html">Feel Good - Robin Thicke</a>
</p>
</div>
<hr id="g_songs"/><p align="center">G</p><hr/>
<div>
<p>
<a id="geronimo_sheppard" href="songs/g/Geronimo_Sheppard.html">Geronimo - Sheppard</a>
</p>
</div>
<hr id="h_songs"/><p align="center">H</p><hr/>
<div>
<p>
<a id="here_alessia_cara" href="songs/h/Here_Alessia_Cara.html">Here - Alessia Cara</a>
</p>
</div>
<hr id="i_songs"/><p align="center">I</p><hr/>
<div>
<p>
<a id="i_write_sins_not_tragedies_panic_at_the_disco" href="songs/i/I_Write_Sins_Not_Tragedies_Panic_At_The_Disco.html">I Write Sins Not Tragedies - Panic! At The Disco</a>
</p>
</div>
<hr id="j_songs"/><p align="center">J</p><hr/>
<div>
<p>
<a id="just_give_me_a_reason_pink" href="songs/j/Just_Give_Me_A_Reason_Pink.html">Just Give Me A Reason - P!nk</a>
</p>
</div>
<hr id="k_songs"/><p align="center">K</p><hr/>
<div>
<p>
<a id="kill_of_the_night_gin_wigmore" href="songs/k/Kill_Of_The_Night_Gin_Wigmore.html">Kill Of The Night - Gin Wigmore</a>
</p>
</div>
<hr id="l_songs"/><p align="center">L</p><hr/>
<div>
<p>
<a id="latch_disclosure" href="songs/l/Latch_Disclosure.html">Latch - Disclosure</a>
</p>
</div>
<hr id="m_songs"/><p align="center">M</p><hr/>
<div>
<p>
<a id="me_and_my_broken_heart_rixton" href="songs/m/Me_And_My_Broken_Heart_Rixton.html">Me And My Broken Heart - Rixton</a>
</p>
</div>
<hr id="n_songs"/><p align="center">N</p><hr/>
<div>
<p>
<a id="the_nights_avicci" href="songs/n/The_Nights_Avicci.html">The Nights - Avicci</a>
</p>
</div>
<hr id="o_songs"/><p align="center">O</p><hr/>
<div>
<p>
<a id="on_my_mind_ellie_goulding" href="songs/o/On_My_Mind_Ellie_Goulding.html">On My Mind - Ellie Goulding</a>
</p>
</div>
<hr id="p_songs"/><p align="center">P</p><hr/>
<div>
<p>
<a id="paradise_coldplay" href="songs/p/Paradise_Coldplay.html">Paradise - Coldplay</a>
</p>
</div>
<hr id="q_songs"/><p align="center">Q</p><hr/>
<div>
<p>
</p>
</div>
<hr id="r_songs"/><p align="center">R</p><hr/>
<div>
<p>
<a id="rather_be_clean_bandit" href="songs/r/Rather_Be_Clean_Bandit.html">Rather Be - Clean Bandit</a>
</p>
</div>
<hr id="s_songs"/><p align="center">S</p><hr/>
<div>
<p>
<a id="secrets_coldplay" href="songs/s/Secrets_Coldplay.html">Secrets - Coldplay</a>
</p>
</div>
<hr id="t_songs"/><p align="center">T</p><hr/>
<div>
<p>
<a id="this_is_how_we_do_katy_perry" href="songs/t/This_Is_How_We_Do_Katy_Perry.html">This Is How We Do - Katy Perry</a>
</p>
</div>
<hr id="u_songs"/><p align="center">U</p><hr/>
<div>
<p>
<a id="uma_thurman_fall_out_boy" href="songs/u/Uma_Thurman_Fall_Out_Boy.html">Uma Thurman - Fall Out Boy</a>
</p>
</div>
<hr id="v_songs"/><p align="center">V</p><hr/>
<div>
<p>
<a id="victorious_panic_at_the_disco" href="songs/v/Victorious_Panic_At_The_Disco.html">Victorious - Panic! At The Disco</a>
</p>
</div>
<hr id="w_songs"/><p align="center">W</p><hr/>
<div>
<p>
<a id="want_to_want_me_jason_derulo" href="songs/w/Want_To_Want_Me_Jason_Derulo.html">Want To Want Me - Jason Derulo</a>
</p>
</div>
<hr id="x_songs"/><p align="center">X</p><hr/>
<div>
<p>
<a id="xo_the_eden_project" href="songs/x/XO_The_Eden_Project.html">XO - The Eden Project</a>
</p>
</div>
<hr id="y_songs"/><p align="center">Y</p><hr/>
<div>
<p>
<a id="you_know_you_like_it_dj_snake" href="songs/y/You_Know_You_Like_It_DJ_Snake.html">You Know You Like It - DJ Snake</a>
</p>
</div>
<hr id="z_songs"/><p align="center">Z</p><hr/>
<div>
<p>
</p>
</div>
</div>
I think I would use relative sizing on the height to do this. Basically, set the height and font-size of the links to a percentage of the viewport with the vh unit of measure.
https://jsfiddle.net/6ksL4845/
ul.main-menu li a {
display: block;
color: #000;
text-decoration: none;
height:3.3vh;
font-size:3vh;
padding:0.2vh 5%;
}
Also, an unsolicited suggestion to simplify your markup (also shown in fiddle:
you might change:
<hr id="a_songs"/><p align="center">A</p><hr/>
to:
<p id="a_songs" class="letter_heading"/>A</p>
and add this to your CSS:
.letter_heading {
border-top:1px solid #bbb;
border-bottom:1px solid #bbb;
padding:15px 0px;
text-align:center;}
i have following problem.
So i want to create a switch content on my Website.
I want to create that i can toggle with my navbar the content.
I dont have any Idea more...
This is my Code
<section class="content show" id="home">
<h1>Welcome</h1>
<h5>My new site is coming soon!</h5>
<p>ich werde diese Seite komplett neu aufbauen, ich hoffe das Ihnen meine neue Webpräsenz gefallen wird. <br><br> Mit freundlichen Grüßen, <br> <b> Alexander Constapel </b> </p>
<p>More info »</p>
</section>
<!-- /About Page -->
<section class="content hide" id="about">
<h1>About</h1>
<h5>Some facts about me!</h5>
<p>
<ul>
<li>Alexander Constapel </li>
<li>20.02.1994 </li>
<li>Ausbildung zum Mediengestalter in Digital und Print </li>
<li>Webdevelopment & Design </li>
</ul></p>
<p>Subscribe me on Facebook!</p>
</section>
<!-- /Contact Page -->
<section class="content hide" id="contact">
<h1>Contact</h1>
<h5>Get in touch!</h5>
<p>Email: Alook.de<br />
Phone: 05<br /></p>
<p>Jever<br />
Germany</p>
</section>
And this is my CSS to this:
.show {
display: block;
}
.hide {
opacity: 0;
}
.content {
color: deepskyblue;
float:left;
margin:40px;
position:absolute;
top:200px;
width:600px;
z-index:9999;
-webkit-font-smoothing:antialiased;
}
Ofc my NAV have href to #home #about #contact
But it still dont work.
Please help me out.
Thanks a lot.
Alex
I am trying to create a pdf using dompdf v0.6.1-4. However i ran into the following weirdness when creating the pdf. The line height looks to be completely ignored by dompdf on a table. Every row gets like a 100 pixel height. That is not how i want it to be.
Here is the html
<!doctype HTML>
<head>
<title>
voucher pdf
</title>
<style>
#wrapper{
width: 800px;
background-color: white;
}
#vouchercode{
font-weight: bolder;
}
#customerlogo img{
width: 400px;
height: 285px;
}
#topleftimgdescr{
text-align: center;
vertical-align: center;
font-weight: bold;
}
#maxwifihref{
text-align: center;
}
#maxwifiimg img{
width: 170px;
height: 75px;
}
#nl{
height: 130px;
}
.countrytext{
margin-left: 8px;
font-weight: bolder;
color: white;
font-size: 30px;
font-family: "Verdana", Arial, sans-serif;
}
.countrypng{
width: 60px;
}
.partial{
height: 140px;
}
.instruction{
margin-left: 60px;
display: inline-block;
font-size: 14px;
}
ul {
margin-top: 0px;
}
#pagebreak{
page-break-after: always;
}
</style>
</head>
<body>
<div id="wrapper">
<table>
<tr>
<td rowspan="5" width="400px" colspan="1" style="text-align: center;">
<img id="customerlogo" src="./assets/images/logo_krieghuus.png" alt="" /><br />
<label style="text-align: center;" id="topleftimgdescr">Vakantiepark de “Krieghuusbelten”</label>
</td>
<td colspan="3" style="text-align: right; vertical-align: top;">
<img id="maxwifilogo" src="./assets/images/maxwifi.png" alt="" /><br />
<label id="maxwifihref" style="margin-right: 50px;"><a>www.maxCoax.nl</a></label>
</td>
</tr>
<tr style="height: 25px;">
<td colspan="3">Wifi activationcode</td>
</tr>
<tr style="height: 25px;">
<td colspan="1">Tijdsduur: </td><td colspan="2" id="timelimit">10080 minuten</td>
</tr>
<tr style="height: 25px;">
<td colspan="1">Apparaten: </td><td colspan="2">1</td>
</tr>
<tr style="height: 25px; line-heigth: 12px;">
<td colspan="1">Activatiecode: </td><td colspan="2" id="vouchercode">PnBndxTvYhu</td>
</tr>
</table>
<div id="instructionsection">
<div class="partial">
<div class="countrypng"><img id="nllogo" src="./assets/images/plate.png" alt="" /><div class="countrytext">NL</div></div>
<div class="instruction">
<b>Instructies</b>
<ul>
<li>
Start uw notebook, PDA of PC. Wanneer u binnen het bereik van een wifi hotspot bent kunt u verbinding<br />
maken met het Wifi netwerk. Start internet en de activatiepagina opent.
</li>
<li>
Vul de hierboven vermelde toegangscode in.
</li>
<li>
De tijdsduurgebruik gaat in na activatie.
</li>
<li>
U kunt gebruik maken van internet.
</li>
<li>
<b>Let op!</b> Deze toegangscode is te activeren op 1 apparaat.
</li>
</ul>
</div>
</div>
<div class="partial">
<div class="countrypng"><img id="enlogo" src="./assets/images/plate.png" alt="" /><div class="countrytext">EN</div></div>
<div class="instruction">
<b>Instructions</b>
<ul>
<li>
Start up your notebook, PDA or PC. Please connect with the Wifi network if you are within range of a Wifi access point.
</li>
<li>
Log on to the internet. You will land on the activation page.
</li>
<li>
Enter the above mentioned access code. The duration of use starts after activation.
</li>
<li>
You are now ready to use internet.
</li>
<li>
<b>Attention!</b> This code is for use on 1 device
</li>
</ul>
</div>
</div>
<div class="partial">
<div class="countrypng"><img id="delogo" src="./assets/images/plate.png" alt="" /><div class="countrytext"> D</div></div>
<div class="instruction">
<b>Hinweise</b>
<ul>
<li>
Starten Sie Ihr Notebook, PDA oder Ihren PC. Wenn Sie sich innerhald der Reichweite eines Accespoints befinden,<br />
dan können Sie mit dem drahlosen Netzwerk verbindung machen.<!--haha, machen! -->
</li>
<li>
Starten Sie internet. Sie bekommen den Aktivierungsseite.
</li>
<li>
Geben Sie den oben erwähnten Aktivierungscode ein. Die Dauerder Anwenung startet nach den Aktivierung.
</li>
<li>
Sie können jetzt das Internet benutzen.
</li>
<li>
<b>Achtung<!-- ik ga helemaal stuk hier!-->!</b> Dieser code können sie gleichzeitig aktiveren für den Einsatz auf 1 Gerät.
</li>
</ul>
</div>
</div>
<div id="pagebreak" class="partial">
<div class="countrypng"><img id="frlogo" src="./assets/images/plate.png" alt="" /><div class="countrytext">FR</div></div>
<div class="instruction">
<b>Instructions</b>
<ul>
<li>
Ouvrez Votre portable, PDA ou PC. Lorsque vous êtes dans les environs d’un point d’accès Wifi, vous serez reliés<br />
après quelques secondes automatique au résea Wifi systeme sans fil.
</li>
<li>
Démarrez internet. Alors sur le site du hotel ou camping.
</li>
<li>
Complétez le code d’accès mentionné ci-dessus. La durée d’utilisation commence après l’activation.
</li>
<li>
Vous pourrez maintenant utiliser internet.
</li>
<li>
<b>Attention!</b> Ce code est utilisé sur 1 pèriphèrique
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
Table support in dompdf is acceptable but not very advanced and so complex table layouts can render poorly in dompdf. You might try simplifying your document as much as possible (e.g. by removing colspan/rowspan which do not appear to be necessary).
For example, the following renders a bit better.
#wrapper{
width: 800px;
background-color: white;
}
#vouchercode{
font-weight: bolder;
}
#topleftimgdescr{
vertical-align: middle;
font-weight: bold;
}
#maxwifihref{
text-align: center;
}
#nl{
height: 130px;
}
.countrytext{
font-weight: bolder;
font-size: 30px;
font-family: "Verdana", Arial, sans-serif;
}
.partial{
margin-top: 2em;
min-height: 140px;
page-break-inside: avoid;
}
.instruction{
font-size: 14px;
}
<!doctype HTML>
<head>
<title>
voucher pdf
</title>
</head>
<body>
<div id="wrapper">
<table>
<tr>
<td width="400px" style="text-align: center;">
<img id="customerlogo" src="http://placehold.it/400x285/cc6666/ffffff&text=dompdf"><br />
<label style="text-align: center;" id="topleftimgdescr">Vakantiepark de “Krieghuusbelten”</label>
</td>
<td style="text-align: right; vertical-align: top;">
<img id="maxwifilogo" src="http://placehold.it/175x75/cc6666/ffffff&text=dompdf" alt="" /><br />
<label id="maxwifihref" style="margin-right: 50px;"><a>www.maxCoax.nl</a></label>
<table>
<tr style="height: 25px;">
<td colspan="3">Wifi activationcode</td>
</tr>
<tr style="height: 25px;">
<td colspan="1">Tijdsduur: </td><td colspan="2" id="timelimit">10080 minuten</td>
</tr>
<tr style="height: 25px;">
<td colspan="1">Apparaten: </td><td colspan="2">1</td>
</tr>
<tr style="height: 25px; line-height: 12px;">
<td colspan="1">Activatiecode: </td><td colspan="2" id="vouchercode">PnBndxTvYhu</td>
</tr>
</table>
</td>
</tr>
</table>
<div id="instructionsection">
<div class="partial">
<div class="countrypng"><img id="nllogo" src="http://placehold.it/60x35/cc6666/ffffff&text=dompdf" alt="" /><span class="countrytext">NL</span></div>
<div class="instruction">
<b>Instructies</b>
<ul>
<li>
Start uw notebook, PDA of PC. Wanneer u binnen het bereik van een wifi hotspot bent kunt u verbinding<br />
maken met het Wifi netwerk. Start internet en de activatiepagina opent.
</li>
<li>
Vul de hierboven vermelde toegangscode in.
</li>
<li>
De tijdsduurgebruik gaat in na activatie.
</li>
<li>
U kunt gebruik maken van internet.
</li>
<li>
<b>Let op!</b> Deze toegangscode is te activeren op 1 apparaat.
</li>
</ul>
</div>
</div>
<div class="partial">
<div class="countrypng"><img id="enlogo" src="http://placehold.it/60x35/cc6666/ffffff&text=dompdf" alt="" /><span class="countrytext">EN</span></div>
<div class="instruction">
<b>Instructions</b>
<ul>
<li>
Start up your notebook, PDA or PC. Please connect with the Wifi network if you are within range of a Wifi access point.
</li>
<li>
Log on to the internet. You will land on the activation page.
</li>
<li>
Enter the above mentioned access code. The duration of use starts after activation.
</li>
<li>
You are now ready to use internet.
</li>
<li>
<b>Attention!</b> This code is for use on 1 device
</li>
</ul>
</div>
</div>
<div class="partial">
<div class="countrypng"><img id="delogo" src="http://placehold.it/60x35/cc6666/ffffff&text=dompdf" alt="" /><span class="countrytext"> D</span></div>
<div class="instruction">
<b>Hinweise</b>
<ul>
<li>
Starten Sie Ihr Notebook, PDA oder Ihren PC. Wenn Sie sich innerhald der Reichweite eines Accespoints befinden,<br />
dan können Sie mit dem drahlosen Netzwerk verbindung machen.<!--haha, machen! -->
</li>
<li>
Starten Sie internet. Sie bekommen den Aktivierungsseite.
</li>
<li>
Geben Sie den oben erwähnten Aktivierungscode ein. Die Dauerder Anwenung startet nach den Aktivierung.
</li>
<li>
Sie können jetzt das Internet benutzen.
</li>
<li>
<b>Achtung<!-- ik ga helemaal stuk hier!-->!</b> Dieser code können sie gleichzeitig aktiveren für den Einsatz auf 1 Gerät.
</li>
</ul>
</div>
</div>
<div id="pagebreak" class="partial">
<div class="countrypng"><img id="frlogo" src="http://placehold.it/60x35/cc6666/ffffff&text=dompdf" alt="" /><span class="countrytext">FR</span></div>
<div class="instruction">
<b>Instructions</b>
<ul>
<li>
Ouvrez Votre portable, PDA ou PC. Lorsque vous êtes dans les environs d’un point d’accès Wifi, vous serez reliés<br />
après quelques secondes automatique au résea Wifi systeme sans fil.
</li>
<li>
Démarrez internet. Alors sur le site du hotel ou camping.
</li>
<li>
Complétez le code d’accès mentionné ci-dessus. La durée d’utilisation commence après l’activation.
</li>
<li>
Vous pourrez maintenant utiliser internet.
</li>
<li>
<b>Attention!</b> Ce code est utilisé sur 1 pèriphèrique
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
Notes: There were a few spelling errors and incorrect selectors which I tried to correct. Also, I wasn't sure what you were going for in some of your layout choices, so I just made a decision in those instances.