ComputerBase Menü
Aktuelles

HTML Textkasten komisch

einfachpeer

einfachpeer

Lt. Commander
Registriert
Apr. 2022
Beiträge
1.616
Hallo.
Ich programmiere gerade einen Slider mit einer Ansammlung von Ansprechpartnern. Doch eine Person /das Textfeld ist total verbuggt. Woran liegt das ?? Weiteres im Anhang

Danke !
 

Anhänge

  • Screenshot 2022-06-23 105358.png
    Screenshot 2022-06-23 105358.png
    34,9 KB · Aufrufe: 253
  • Screenshot 2022-06-23 105523.png
    Screenshot 2022-06-23 105523.png
    612,4 KB · Aufrufe: 247
Hi @einfachpeer ,

kannst du die gesamte HTML Struktur und CSS beifügen als Code Snippet? Ohne wird es recht schwer dir zu helfen.
 
CSS Framework? Welche Browser getestet?
Vermutlich sollte das äußere DIV nicht die klasse "profile-circle" sondern nur "profile" haben.
 
Du machst zwei verschachtelte class="col-md-3". Wenn ich mich nicht irre, dann teilt er im geschachtelten col-md-3 die 3 cols des übergeordneten Elements erneut in 3 von 12 Spalten - also nur 1/4 des zur Verfügung stehenden Platzes. Vergleiche daher die classes mit den anderen 3 Personen ob da ebenfalls verschachtelt wird und nimm die innere div class raus.


Nächstes Mal bitte etwas mehr Infos liefern und ggfs den Code auch in Code-Tags vollständig hier posten, zumindest so vollständig, dass man den Überblick hat.
 
<!--End of item with active-->
<div class="item">
<div class="row">
<div class="col-md-3">
<div class="profile-circle">
<img src="img/team11.jpg" alt="">
</div>
<div class="testimonial_content">
<i class="fa fa-quote-left"></i>
<p>XY kümmert sich im Verein um das Sponsoring. Sie erreichen Sie unter <br><b>XY</b></p>
</div>
<div class="testimonial_author">
<h5>XY</h5>
<p>XY</p>
</div>
</div>



<div class="col-md-3">
<div class="profile">

<div class="col-md-3">
<div class="profile-circle">
<img src="img/team12.jpg" alt="">
</div>
<div class="testimonial_content">
<i class="fa fa-quote-left"></i>
<p>PROBLEM ist Tierschutzbeauftragte des Vereins und achtet auf das Wohl der Tiere. .</p>
</div>
<div class="testimonial_author">
<h5>PROBLEM</h5>
<p>PROBLEM</p>
</div>
</div>


</div>
</div>
<div class="col-md-3">
<div class="profile-circle">
<img src="img/team7.jpg" alt="">
</div>
<div class="testimonial_content">
<i class="fa fa-quote-left"></i>
<p>XY ist die Ansprechpartnerin für Boxenvermietung und Voltigieren. Sie erreichen Sie unter <br><b>XY.</b></p>
</div>
<div class="testimonial_author">
<h5>XY</h5>
<p>XY</p>
</div>
</div>
<div class="col-md-3">
<div class="profile-circle">
<img src="img/tmp.png" alt="">
</div>
<div class="testimonial_content">
<i class="fa fa-quote-left"></i>
<p>XY ist für die Versorgung unserer Pferde und Ponys zuständig.</p>
</div>
<div class="testimonial_author">
<h5>XY</h5>
<p>XY</p>
</div>
</div>
</div>
</div>
<!--End of item with active-->
Ergänzung ()

XY funktioniert und PROBLEM nicht
Ergänzung ()

netzgestaltung schrieb:
CSS Framework? Welche Browser getestet?
Zum Vergrößern anklicken....
chrome
Ergänzung ()

findet einer mehr als ich ? ;)
 
Zuletzt bearbeitet:
es gibt hier im Editor bei den 3 Punkten ein icon </> mit dem du Code gut lesbar und ordentlich eingerückt einfügen kannst. Bitte auch dein CSS dazu posten.
 
Code: 
<!--End of item with active-->
                                            <div class="item">
                                                <div class="row">
                                                    <div class="col-md-3">
                                                        <div class="profile-circle">
                                                            <img src="img/team11.jpg" alt="">
                                                        </div>
                                                        <div class="testimonial_content">
                                                            <i class="fa fa-quote-left"></i>
                                                            <p>XY kümmert sich im Verein um das Sponsoring. Sie erreichen Sie unter <br><b>XY</b></p>
                                                        </div>
                                                        <div class="testimonial_author">
                                                            <h5>XY</h5>
                                                            <p>XY</p>
                                                        </div>
                                                    </div>



                                                    <div class="col-md-3">
                                                        <div class="profile">
                                                              
                                                            <div class="col-md-3">
                                                                <div class="profile-circle">
                                                                    <img src="img/team12.jpg" alt="">
                                                                </div>
                                                                <div class="testimonial_content">
                                                                    <i class="fa fa-quote-left"></i>
                                                                    <p>PROBLEM ist Tierschutzbeauftragte des Vereins und achtet auf das Wohl der Tiere. .</p>
                                                                </div>
                                                                <div class="testimonial_author">
                                                                    <h5>PROBLEM</h5>
                                                                    <p>PROBLEM</p>
                                                                </div>
                                                            </div>
                                                        

                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="profile-circle">
                                                            <img src="img/team7.jpg" alt="">
                                                        </div>
                                                        <div class="testimonial_content">
                                                            <i class="fa fa-quote-left"></i>
                                                            <p>XY ist die Ansprechpartnerin für Boxenvermietung und Voltigieren. Sie erreichen Sie unter <br><b>XY.</b></p>
                                                        </div>
                                                        <div class="testimonial_author">
                                                            <h5>XY</h5>
                                                            <p>XY</p>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="profile-circle">
                                                            <img src="img/tmp.png" alt="">
                                                        </div>
                                                        <div class="testimonial_content">
                                                            <i class="fa fa-quote-left"></i>
                                                            <p>XY ist für die Versorgung unserer Pferde und Ponys zuständig.</p>
                                                        </div>
                                                        <div class="testimonial_author">
                                                            <h5>XY</h5>
                                                            <p>XY</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!--End of item with active-->
Ergänzung ()

Code: 
/***************************************
Template Name: Green Fair
Author: Md Foysal Ahamed
Created: July 05 2016
Version: 1.2
****************************************/


/*CSS Style Structure
1. General Or Universal code,
2. Import Google's Fonts,
3. Header,
4. Slider,
5. Welcome,
6. tarife,
7. Portfolio,
8. Achivment,
9. Event,
10. team,
11. Latest Blog,
12. Purches,
13. Contact,
14. Footer.
*/


/*
font-family: 'Roboto Slab', serif;
*/

@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,700,300,100);

/*
font-family: 'Lato', sans-serif;
*/

@import url(https://fonts.googleapis.com/css?family=Lato:400,100,100italic,300,300italic,400italic,700,700italic,900,900italic);

/*
font-family: 'Raleway', sans-serif;
*/

@import url(https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900);

/*
font-family: 'Open Sans', sans-serif;
*/

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700italic,700,800,800italic);

/*
font-family: 'Roboto', sans-serif;
*/

@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic);

/*UNIVERSAL CODE*/

* {
    margin: 0;
    padding: 0;
}
.alignleft {
    float: left;
    margin-right: 15px
}
.alignright {
    float: right;
    margin-left: 15px;
}
.aligncenter {
    display: block;
    margin: 0 auto
}
.floatleft {
    float: left
}
.floatright {
    float: right
}
.fix {
    overflow: hidden
}
.clear {
    clear: both
}
.container {
    transition: all 0.9s ease 0s;
    -webkit-transition: all 0.9s ease 0s;
    -moz-transition: all 0.9s ease 0s;
    -o-transition: all 0.9s ease 0s;
    -ms-transition: all 0.9s ease 0s;
}
ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
a,
a:hover,
a:focus,
a:visited,
a:hover {
    text-decoration: none !important;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
    font-weight: normal;
}
p {
    padding: 0;
    margin: 0;
}
img {
    max-width: 100%;
    height: auto;
}
html {
    height: 100%
}
body {
}

/*Remove chrome Input Field’s Unwanted Yellow Background Color*/

input: -webkit-autofill,
input: -webkit-autofill:hover,
input: -webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 100px white inset !important;
}

/*Input focus color removed*/

:focus {
    outline: -webkit-focus-ring-color auto 0px;
}

/*Bootstrap Form Control Focus*/

.form-control:focus {
    border-color: #fff;
    border: 0px;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

/***************************/

.zero_mp {
    padding: 0;
    margin: 0;
}
.margin_btm {
    margin-bottom: 0px !important;
}
.sections{
    padding: 80px 0;
    overflow: hidden;
    position: relative;
}
.min-spacing{
    padding: 50px 0;
    overflow: hidden;
    position: relative;
}
/***********************************************/


/*header*/


/*Header Top header*/

#header .top_header {
    min-height: 50px;
    background: #FBFBFB;
    border-bottom: 2px solid #F2F2F2;
    padding-top: 15px;
}
#header .top_header .address {
    border-right: 1px solid #E6E5E5;
}
#header .top_header .address p {
    font-size: 12px;
    padding-top: 2px;
    color: #646464;
    font-family: 'Open Sans', sans-serif;
}
#header .top_header .phone p {
    color: #646464;
    font-size: 12px;
    font-family: 'Open Sans', sans-serif;
    padding-top: 1px;
    display: inline-block;
}
#header .top_header .address i,
#header .top_header .phone i {
    padding: 3px 5px;
    font-size: 15px;
}
#header .top_header .social_icon i {
    padding: 0 5px;
    color: #787878;
    font-size: 12px;
    font-weight: 700;
}
#header .top_header .social_icon i:hover {
    color: #cc0e0e;
}

/*End of top header*/

#header .header_menu {
    min-height: 80px;
    border-bottom: 1px solid #3D3E3D;
    z-index: 9999
}
#header .header_menu .navbar {
    border: 0px solid transparent;
}
#header .header_menu .custom_navbar-brand {
    padding-left: 0;
}
#header .header_menu .navbar-default {
    background-color: rgba(255, 255, 255, 0);
    border-color: rgba(255, 255, 255, 0);
}
#header .header_menu .navbar-default .navbar-nav>.active>a,
#header .header_menu .navbar-default .navbar-nav>.active>a:focus,
#header .header_menu .navbar-default .navbar-nav>.active>a:hover {
    background-color: rgba(255, 255, 255, 0);
}
#header .header_menu .main_menu {
    padding-top: 20px;
}
#header .header_menu ul.main_menu li a {
    color: #393939;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
    font-family: 'Roboto Slab', serif;
}
#header .header_menu ul.main_menu li a:hover {
    color: #cc0e0e;
}
#header .header_menu ul.main_menu li.active a {
    color: #cc0e0e;
}
#header .header_menu ul.main_menu li,
#header .header_menu ul.main_menu li.active a {
    display: inline-block;
    position: relative;
}
#header .header_menu ul.main_menu li:after {
    content: '';
    display: block;
    margin: auto;
    height: 3px;
    width: 0px;
    background: transparent;
    transition: width .5s ease, background-color .5s ease;
    margin-top: 6px;
}
#header .header_menu ul.main_menu li:hover:after,
#header .header_menu ul.main_menu li.active:after {
    width: 90%;
    background: #cc0e0e;
}

/*Slider*/

#slider {
    min-height: 490px;
}
#slider .slider_text {
    padding-bottom: 13%;
}
#slider .slider_text h2 {
    font-size: 52px;
    padding: 10px 0;
    font-weight: 600;
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
}
#slider .slider_text h3 {
    font-size: 45px;
    font-family: 'Open Sans', sans-serif;
    color: #fff;
}
#slider .slider_text p {
    font-size: 17px;
    padding-bottom: 60px;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
}
#slider .slider_text a.custom_btn {
    font-size: 14px;
    color: #fff;
    padding: 15px 25px;
    background: #cc0e0e;
    border-radius: 2px;
    margin-top: 20px;
    font-family: 'Lato', sans-serif;
    font-weight: 600;
}
#slider .slider_text h2,
#slider .slider_text h3,
#slider .slider_text p,
#slider .slider_text a.custom_btn {
    text-transform: uppercase;
}
#slider .slider_text h3 {
    font-size: 45px;
    padding: 10px 0;
    font-family: 'Lato', sans-serif;
    font-weight: normal;
}
#slider .slider_overlay {
    position: relative;
}
#slider .slider_overlay:after {
    position: absolute;
    content: "";
    background: rgba(0, 0, 0, 0.3);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

/*Slider Fade In*/

.carousel-fade .carousel-inner .item {
    -webkit-transition-property: opacity;
    transition-property: opacity;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    left: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-control {
    z-index: 2;
}

/*Welcome Section*/
#welcome {
    min-height: 350px;
    background: #fff;
    padding: 80px 0;
}
.wel_header {
    text-align: center;
    color: #222222;
    padding-top: 0;
}
.fw-heading.fw-heading-center {
    padding-bottom: 40px;

}
.wel_header h2 {
    font-size: 36px;
    text-transform: uppercase;
    font-weight: 700;
    padding-bottom: 25px;
    font-family: 'Roboto Slab', serif !important;
    color: #222222;
}
.wel_header p {
    font-size: 16px;
    font-family: 'Open Sans', sans-serif;
}
#welcome .single_item {
    padding-top: 30px;
    text-align: center;
}
#welcome .welcome_icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    text-align: center;
    margin: 0 auto;
    border: 1px solid #C4C4C4;
    transition: .7s;
}
#welcome .welcome_icon i {
    margin-top: 25%;
    font-size: 50px;
    transition: .7s;
}
#welcome .item_list h4 {
    padding: 20px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 18px;
    color: #393939;
    transition: 0.7s;
    font-family: 'Roboto Slab', serif;
}
#welcome .item_list p {
    font-size: 14px;
    color: #646464;
    font-family: 'Open Sans', sans-serif;
}
#welcome .item_list:hover .welcome_icon {
    background: #cc0e0e;
    cursor: pointer;
}
#welcome .item_list:hover .welcome_icon i {
    color: #fff;
}
#welcome .item_list:hover h4 {
    color: #cc0e0e;
    cursor: pointer;
}

/*tarife*/

#tarife {
    min-height: 290px;
    background: #000000;
}
#tarife .tarife_content h3 {
    font-size: 45px;
    text-transform: uppercase;
    font-weight: 700;
    color: #fff;
    padding-bottom: 10px;
    font-family: 'Open Sans', sans-serif;
}
#tarife .tarife_content h3 span {
    color: #cc0e0e;
}
#tarife .tarife_content p {
    font-size: 14px;
    color: #fff;
    font-family: 'Open Sans', sans-serif;
}
#tarife .join_us {
    padding-top: 55px;
}
#tarife .vol_area {
    padding: 80px 0;
}
#tarife .join_us a.vol_cust_btn {
    background: #cc0e0e;
    color: #fff;
    padding: 8px 50px;
    border: 1px solid #cc0e0e;
    border-radius: 3px;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 700;
    font-family: 'Open Sans', sans-serif;
}

/*Portfolio*/

#portfolio {
    min-height: 780px;
    padding: 80px 0;
}

#portfolio .portfolio_title h2 {
    font-size: 36px;
    font-weight: 700;
    text-transform: uppercase;
    padding-bottom: 15px;
    font-family: 'Roboto Slab', serif;
    color: #222222;
}
#portfolio .portfolio_title p {
    font-size: 16px;
    color: #393939;
    padding-bottom: 25px;
    padding-top: 0;
    font-family: 'Open Sans', sans-serif;
}

/*Customise Portfolio*/

#portfolio ul.menu li button {
    padding: 6px 15px;
}
#portfolio ul.portfolio_custom_menu li button {
    background: #f6f6f6;
    border: 1px solid #e9e9e9;
    color: #726e6e;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 20px;
    width: 125px;
    font-size: 12px;
    padding-top: 8px;
    border-radius: 4px;
    font-family: 'Roboto', sans-serif;
}
#portfolio ul.portfolio_custom_menu li {
    padding: 10px 0px;
}
#portfolio ul.portfolio_custom_menu li button:hover {
    background: #cc0e0e;
    color: #fff;
}
#portfolio ul.portfolio_custom_menu li button.btn_active {
    background: #cc0e0e;
    box-shadow: inset 0 1px 10px hsla(0, 0%, 100%, 0);
    color: #fff;
}
#portfolio .notes .note .img_overlay {
    background: rgba(21, 21, 18, 0.92);
    z-index: 1;
    position: absolute;
    width: 94%;
    height: 94%;
    top: 3%;
    left: 3%;
    color: #fff;
    opacity: 0;
    transition: 0.7s;
}
#portfolio .notes .note .img_overlay p {
    position: relative;
    top: 45%;
    opacity: 0;
    transition: 0.7s;
    font-size: 16px;
    font-family: 'Roboto Slab', serif;
    font-weight: 400;
}
#portfolio .notes .note:hover .img_overlay,
#portfolio .notes .note:hover .img_overlay p {
    opacity: 10;
}

/*Achivment*/

div#achivement {
    overflow: hidden;
}
.achivment_padding {
    padding: 80px 0;
}
/*#counter {
    min-height: 440px;
    background: #bdbebd;
    border-bottom: 1px solid #8c8e8c;
}*/
/*.counter_header {
    padding-top: 80px;
    text-align: center;
    color: #fff;
}*/
section#counter {
    background: url(../img/img1.jpg) no-repeat scroll top center / cover;
    color: #fff;
}
.counter_img_overlay {
    position: relative;
    padding: 80px 0;
    text-align: center;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.52);
}
.counter_header h2 {
    text-transform: uppercase;
    font-size: 36px;
    font-weight: 700;
    padding-bottom: 10px;
    font-family: 'Roboto Slab', serif;
}
.counter_header p {
    font-size: 16px;
    padding-bottom: 60px;
    font-family: 'Open Sans', sans-serif;
    padding-top: 15px;
}
.counter_text {
    color: #fff;
    font-weight: 700;
}
.sigle_counter_item {
    padding-top: 20px;
    padding-bottom: 0px;
}
.sigle_counter_item img {
    padding-bottom: 20px;
    height: 90px;
}
.sigle_counter_item i {
    font-size: 60px;
    padding: 10px;
    color: #cc0e0e;
}
.counter_text span {
    font-size: 32px;
    border-bottom: 1px solid;
    padding-bottom: 10px;
    font-family: 'Roboto Slab', serif;
    font-weight: 600;
}
.counter_text p {
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 400;
    padding-top: 10px;
    font-family: 'Roboto Slab', serif;
    color: #ffffff;
    margin-top: 10px;
}

/*Event*/

#event {
    min-height: 550px;
    background: #fff;
    color: #000;
    padding: 80px 0px;
}
#event .event_header {
    padding-bottom: 50px;
}
#event .event_header h2 {
    font-size: 36px;
    font-weight: 700;
    padding-bottom: 20px;
    text-transform: uppercase;
    font-family: 'Roboto Slab', serif;
    color: #222222;
}
.event_header.text-center p {
    color: #393939;
    font-size: 16px;
    font-family: 'Open Sans', sans-serif;
}
#event .event_text {
    padding: 30px 30px 0;
    background: #eff0f2;
    min-height: 279px;
}
#event .event_item img {
    width: 100%;
}
#event .event_text {
    padding: 30px 30px 0;
    width: 100%;
}
#event .event_text h4 {
    font-size: 18px;
    padding-bottom: 15px;
    font-weight: 700;
    color: #454444;
    font-family: 'Roboto Slab', serif;
}
#event .event_text h6 {
    padding-bottom: 20px;
    font-size: 14px;
    color: #6c6b6b;
    font-family: 'Roboto Slab', serif;
}
#event .event_text p {
    font-size: 14px;
    color: #646464;
    padding-bottom: 35px;
    font-family: 'Open Sans', sans-serif;
}
#event a.event_btn {
    background: #101010;
    padding: 5px 15px;
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 2px;
    transition: 0.7s ease;
    font-family: 'Open Sans', sans-serif;
}
#event a.event_btn:hover {
    background: #cc0e0e;
}
#event .event_news {
    padding-bottom: 27px;
}
.event_news_text {
    display: block;
    overflow: hidden;
}
.event_news_text h4 {
    color: #454444;
    font-size: 18px;
    font-family: 'Roboto Slab', serif;
    font-weight: 700;
}
#event .event_news_text p {
    padding-top: 10px;
    font-size: 14px;
    color: #646464;
    font-family: 'Open Sans', sans-serif;
}
#event .event_news_img {
    padding-right: 10px;
}

/*Testimonial*/

#testimonial {
    color: #fff;
    background: url(../img/img3.jpg) no-repeat scroll top center / cover;
}
.testimonial_overlay {
    padding: 80px 0;
    position: relative;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.53);
}
#testimonial .testimonial_header {
}
#testimonial .testimonial_header h2 {
    font-size: 36px;
    font-weight: 700;
    text-transform: uppercase;
    padding-bottom: 20px;
    font-family: 'Roboto Slab', serif;
    color: #fff;
}
#testimonial .testimonial_header p {
    font-size: 16px;
    color: #fff;
    font-family: 'Open Sans', sans-serif;
}
#testimonial .testimonial_author p {
    font-size: 16px;
    color: #cc0e0e;
    font-family: 'Open Sans', sans-serif;
}

/*Latest Blog*/

#blog {
    min-height: 500px;
    padding: 80px 0;
}
#blog p {
    display: inline-block;
}
#blog .latest_blog {
}
#blog .latest_blog h2 {
    padding-bottom: 20px;
    font-size: 36px;
    font-weight: 700;
    text-transform: uppercase;
    font-family: 'Roboto Slab', serif;
    color: #222222;
}
#blog .latest_blog p {
    padding-bottom: 45px;
    font-size: 16px;
    color: #646464;
    font-family: 'Open Sans', sans-serif;
}
#blog .single_blog_item {
    border: 1px solid #d1d3d1;
}
#blog .blog_content {
    padding: 15px;
    height: 250px;
}
#blog .blog_content h3 {
    font-size: 22px;
    font-weight: 400;
    padding-bottom: 10px;
    color: #454444;
    font-family: 'Roboto Slab', serif;
}
#blog .expert {
    padding-bottom: 20px;
    color: #aeadad;
}
#blog .expert span.time {
    padding-right: 10px;
    border-right: 1px solid;
}
#blog .expert span.admin {
    padding-left: 5px;
    color: #aeadad;
    font-size: 13px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
}
#blog .blog_news .blog_img img {
    height: 230px;
    width: 100%;
}
#blog .blog_news span.right_msg span {
    font-size: 14px;
    color: #aeadad;
    font-family: 'Roboto Slab', serif;
    font-weight: 400;
}
#blog .expert a {
    color: #aeadad;
}
#blog .expert p.right_side {
    padding-left: 110px;
}
#blog p.blog_news_content {
    color: #646464;
    font-size: 14px;
    padding-bottom: 15px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
#blog a.blog_link {
    text-transform: uppercase;
    font-weight: 500;
    color: #545353;
    transition: 0.7s;
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
}
#blog a.blog_link:hover {
    color: #cc0e0e;
}

/*purches*/
section#market {
    padding: 80px;
}

#purches {
    min-height: 200px;
    background: #333333;
}
#purches .purches_title {
    font-size: 36px;
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
}
#purches h2.purches_title {
    font-size: 36px;
    padding-top: 80px;
    font-family: 'Roboto Slab', serif;
    font-weight: 700;
    color: #ffffff;
}
#purches a.purches_btn {
    float: right;
    margin-top: 80px;
    padding: 8px 58px;
    background: #cc0e0e;
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 2px;
    font-family: 'Roboto Slab', serif;
    font-size: 18px;
}
div#market-place {
    min-height: 200px;
    border-bottom: 1px solid #bcbaba;
}


/*Contact*/

#contact {
    min-height: 650px;
    background: #eeeeee;
    padding: 80px 0;
}

.msg {
    padding-top: 50px;
}
input#name,
input#email {

    margin-bottom: 10px !important;
}

.text_area textarea {
    resize: none;
    width: 555px;
}
.text_area textarea,
.form-inline .form-control,
input#name,
input#email,
input#subject{
    border-radius: 0px;
    margin-bottom: 20px;
    border: 0px;
    -webkit-box-shadow: none;
    box-shadow: none;
    background: #d4d4d4;
    font-style: italic;
    color: #696969;
    font-family: 'Open Sans', sans-serif;
}
li.fw-flash-message {
    color: red;
    font-size: 4rem;
}
.msg_title h5 {
    font-size: 22px;
    text-transform: uppercase;
    font-weight: 400;
    padding-bottom: 20px;
    font-family: 'Roboto Slab', serif;
    color: #222222;
}
.custom-btn {
    padding: 13px 82px;
    background: #cc0e0e;
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    border: 0px;
    border-radius: 2px;
    letter-spacing: 5px;
    font-size: 14px;
    font-family: 'Roboto Slab', serif;
    outline: 0 !important;
}
.office {
    padding-top: 50px
}
.office .title h5 {
    font-size: 22px;
    font-weight: 400;
    text-transform: uppercase;
    padding-bottom: 20px;
    font-family: 'Roboto Slab', serif;
    color: #222222;
}
.office_location i span {
    padding-left: 15px;
    color: #696969;
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;
}
.office_location i {
    padding-bottom: 15px;
}
.office_location {
    color: #696969;
}
.contact_area h3 {
    font-size: 36px;
    padding-bottom: 20px;
    font-weight: 700;
    text-transform: uppercase;
    color: #222222;
    font-family: 'Roboto Slab', serif;
}
.contact_area p {
    font-size: 16px;
    color: #646464;
    font-family: 'Open Sans', sans-serif;
}
#map {
    width: 100%;
    margin: 0;
    box-shadow: 0px 0px 0px rgba(255, 255, 255, 0);
    min-height: 300px;
}

/*Footer*/

#footer {
    min-height: 100px;
    background: #222222;
    color: #fff;
}
#footer .copyright,
#footer .designer {
    padding-top: 45px;
    font-size: 14px;
}
#footer .copyright p {
    text-align: left;
}
#footer .designer p {
    text-align: right;
}
#footer .copyright p,
#footer .copyright p span a,
#footer .designer p,
#footer .designer a {
    font-size: 14px;
    color: #ffffff;
    font-family: 'Open Sans', sans-serif;
    padding-left: 3px;
}

/*Back to Top*/

#back-to-top {
    position: fixed;
    bottom: 15px;
    right: 15px;
    z-index: 9999;
    width: 32px;
    height: 32px;
    text-align: center;
    line-height: 30px;
    background: rgba(84, 225, 0, 0.18);
    color: #ffffff;
    cursor: pointer;
    border: 0;
    text-decoration: none;
    transition: all 0.5s ease;
    opacity: 0;
    display: none;
    background: #cc0e0e;
}
#back-to-top:hover {
    color: #fff;
    border-radius: 50%;
}
#back-to-top.show {
    opacity: 1;
}

.affix {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1;
    background: #fff;
    padding-top:0px;
}



/**/

.section-wraper {
    position: relative;
}
.section-edit {
    position: absolute;
    width: 100%;
    bottom: 0;
    z-index: 1;
}
.section-abc {
    background: rgba(255, 255, 255, 0.68);
    padding: 2px 5px;
    font-size: 12px;
    font-style: italic;
    display:none;
}
.section-edit:hover .section-abc{
    display:inline;
}
.section-edit .post-edit-link {
    margin: 10px 0;
    padding: 2px 12px;
}
.section-edit .post-edit-link {
    margin: 3px 0;
    padding: 2px 12px;
    font-size: 12px;
    line-height: 1.45;
}
.section-edit .post-edit-link {
    margin: 10px 0;
    display: inline-block;
    background: #E85757 ;
    color: #fff!important;
    padding: 2px 12px;
    border-radius: 3px;
}
.recent-blog .entry-header a {
    font-size: 1.5rem;
}

.event_img img {
    width: 440px;
    height: 279px;
}
.event_news_img img {
    width: 95px;
    height: 90px;
}

#market-place .fw-single-image img {
    margin: 0 auto;
}


/*.contact_us_padding {
    padding: 80px 0px;
}*/
#contact-us .wel_header {
    padding-top: 0px;
    padding-bottom: 0;
}

#contact-us h3 {
    font-size: 36px;
    padding-bottom: 20px;
    font-weight: 700;
    text-transform: uppercase;
    color: #222222;
    font-family: 'Roboto Slab', serif;

}

#contact-us .wel_header h5 {
    text-align: left;
    font-size: 22px;
    font-weight: 400;
    text-transform: uppercase;
    padding-bottom: 20px;
    font-family: 'Roboto Slab', serif;
    color: #222222;
    padding-top: 0px
}
#contact-us .office_location i {
    padding-bottom: 15px;
}
#contact-us .office_location i span {
    padding-left: 15px;
    color: #696969;
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;
}

#contact-us .form-group {
    margin-bottom: 0;
}
.wel_header.contact_us_h5 {
    margin-left: -15px !important;
}
/*input#name,label.input,label.textarea,textarea.form-control {
    width: 100%;
}*/

#slider .carousel-indicators {
    bottom: 70px;
}

ul.entry-meta {
    text-align: left;
}
.btn-primmary{
    background-color: #cc0e0e;
    padding: 10px 30px;
    font-size: 16px;
    font-family: 'Roboto Slab', serif;
    font-weight: 700;
}
.btn.focus, .btn:focus, .btn:hover {
    color: #ffffff;
}
#commentform #comment {
    padding-left: 10px;
    margin-top: 10px;
}
.widget_search .search-form input[type="submit"], .widget_search input[type="submit"] {
    font-family: 'Roboto Slab', serif;
    font-weight: 700;
}
.widget_search .search-form input[type="search"], .widget_search input[type="search"] {
    padding: 0 40px;
}
.main-content.blog-w.rap,.main-content.container.blog-wrap.single-blog {
    margin-top: 80px;
}
 
Lösche Zeile 20+21 und die dazugehörigen End-Tags. Du siehst doch, dass sich dieser Block vom Rest unterscheidet.

Zur Not mach eben Copy&Paste vom XY-Block und ändere die Texte.
 
HTML: 
<!--End of item with active-->
<div class="item">
  <div class="row">
   
    <div class="col-md-3">
   
      <div class="profile-circle">
        <img src="img/team11.jpg" alt="">
      </div>
      <div class="testimonial_content">
        <i class="fa fa-quote-left"></i>
        <p>XY kümmert sich im Verein um das Sponsoring. Sie erreichen Sie unter <br><b>XY</b></p>
      </div>
      <div class="testimonial_author">
        <h5>XY</h5>
        <p>XY</p>
      </div>
     
    </div>

    <div class="col-md-3">
      <div class="profile">
           
        <div class="col-md-3">
          <div class="profile-circle">
              <img src="img/team12.jpg" alt="">
          </div>
          <div class="testimonial_content">
              <i class="fa fa-quote-left"></i>
              <p>PROBLEM ist Tierschutzbeauftragte des Vereins und achtet auf das Wohl der Tiere. .</p>
          </div>
          <div class="testimonial_author">
              <h5>PROBLEM</h5>
              <p>PROBLEM</p>
          </div>
        </div>

      </div>
    </div>
   
    <div class="col-md-3">
   
      <div class="profile-circle">
        <img src="img/team7.jpg" alt="">
      </div>
      <div class="testimonial_content">
        <i class="fa fa-quote-left"></i>
        <p>XY ist die Ansprechpartnerin für Boxenvermietung und Voltigieren. Sie erreichen Sie unter <br><b>XY.</b></p>
      </div>
      <div class="testimonial_author">
        <h5>XY</h5>
        <p>XY</p>
      </div>
     
    </div>
   
    <div class="col-md-3">
   
      <div class="profile-circle">
        <img src="img/tmp.png" alt="">
      </div>
      <div class="testimonial_content">
        <i class="fa fa-quote-left"></i>
        <p>XY ist für die Versorgung unserer Pferde und Ponys zuständig.</p>
      </div>
      <div class="testimonial_author">
        <h5>XY</h5>
        <p>XY</p>
      </div>
     
    </div>

  </div>
</div>
<!--End of item with active-->

so sieht das dann aus. Stelle deinen Editor auf "Leerzeichen statt Tabs" Einrückung: "2 Leerzeichen".

Hier lässt sich bereits erkennen, dass das HTML nicht einheitlich ist.
 
Zuletzt bearbeitet:
Gerade in der mobilen Version getetset. Da geht das Sehr komisch. Jetzt muss es nur noch auf dem Desktop
Ergänzung ()

Raijin schrieb:
Lösche Zeile 20+21 und die dazugehörigen End-Tags. Du siehst doch, dass sich dieser Block vom Rest unterscheidet.

Zur Not mach eben Copy&Paste vom XY-Block und ändere die Texte.
Zum Vergrößern anklicken....
Dann buggt alles rum. habe ich doch auch schon versucht
 

Anhänge

  • Screenshot 2022-06-23 113118.png
    Screenshot 2022-06-23 113118.png
    220,9 KB · Aufrufe: 186
Ich habs mal eben bei mir ins Notepad geschoben und nur strukturell geprüft. Da fehlen 2 schließende DIVs

1655976831918.png



Edit: Das passt genau zur Aussage von @Raijin
Wenn du die zwei öffnenden DIVs entfernst passt es auch wieder strukturell!
 
  • Gefällt mir
Reaktionen: Raijin
einfachpeer schrieb:
Gerade in der mobilen Version getetset. Da geht das Sehr komisch. Jetzt muss es nur noch auf dem Desktop
Zum Vergrößern anklicken....
Weil auf einem Mobilgerät die Größenskalierung "md" tendenziell "sm" sein wird.

Je nachdem wie groß du das Browser-Fenster auf dem PC ziehst, wird die Größe als sm, md oder lg erkannt und dementsprechend die Settings angepasst. Das kann sogar darauf hinauslaufen, dass Elemente, die nebeneinander lagen, im sm plötzlich untereinander liegen.
 
Raijin schrieb:
Lösche Zeile 20+21 und die dazugehörigen End-Tags. Du siehst doch, dass sich dieser Block vom Rest unterscheidet.

Zur Not mach eben Copy&Paste vom XY-Block und ändere die Texte.
Zum Vergrößern anklicken....
Dann sieht das so aus...
Ergänzung ()

SaxnPaule schrieb:
Ich habs mal eben bei mir ins Notepad geschoben und nur strukturell geprüft. Da fehlen 2 schließende DIVs

Anhang anzeigen 1231120
Zum Vergrößern anklicken....
wo genau ?
 

Anhänge

  • sdaef.png
    sdaef.png
    813,7 KB · Aufrufe: 189
würde vorschlagen nochmal mit der ersten Box zu beginnen bis diese passt, sie dann kopieren und mit den inhalten der anderen ausfüllen.

du kannst den aktuellen stand ja wo anders speichern und später per diff vergleichen.
 
  • Gefällt mir
Reaktionen: Raijin
Es sollen doch alle 4 Blöcke identisch sein. Mach Copy&Paste von einem funktionierenden Block und ersetze alle anderen mit diesem Block, umschlossen von der row.
 
Raijin schrieb:
Es sollen doch alle 4 Blöcke identisch sein. Mach Copy&Paste von einem funktionierenden Block und ersetze alle anderen mit diesem Block, umschlossen von der row.
Zum Vergrößern anklicken....
Das war doch schon ein funktionierender den ich kopiert habe. Hab sogar schon den XY genommen und da eingefügt und der macht genau das selbe
Ergänzung ()

SaxnPaule schrieb:
Ich habs mal eben bei mir ins Notepad geschoben und nur strukturell geprüft. Da fehlen 2 schließende DIVs

Anhang anzeigen 1231120


Edit: Das passt genau zur Aussage von @Raijin
Wenn du die zwei öffnenden DIVs entfernst passt es auch wieder strukturell!
Zum Vergrößern anklicken....
Welche 2 DIVs sollen es denn sein ? ;-)
 
schau mal der zweite block ist anders, ist wie ein suchspiel. du hast ja den einen doppelten "profile-picture" umbenannt. der war aber einfach nur doppelt gemoppelt. ka wie der reingekommen ist, aber alle anderen haben nach col-md-3 keinen weiteren div col-md-3 innen drin - halt beim copy/paste passiert, falsch markiert mit der maus oder ähnliches.
 
Ich habs mir jetzt nochmal etwas genauer angeschaut. Packe dir den Code von oben in einen Editor mit Highlighting und bring deine DIVs in Ordnung. Es sind 2 zu viel und einer an einer falschen Stelle geschlossen.
 
Übrigens: Wenn das sowohl auf mobilen Clients bzw. auf kleineren Displays als auch auf größeren Displays zum Einsatz kommen soll, musst du dich mit den Größen-Klassen im Detail auseinandersetzen.

Das System skaliert in 4 Stufen:

xs
sm
md
lg

Wenn du zB col-md-3 verwendest, gilt das für md und lg. sm und xs sind dabei undefiniert bzw. das wird dann irgendwie automatisch gemacht. Will man das anpassen, muss man ggfs class="col-xs-6 col-md-3" machen, was dann für xs und sm 6 Spalten bedeuten würde und für md und lg 3.


HTML: 
<!--End of item with active-->
<div class="item">
  <div class="row">
    
    <div class="col-md-3">
      <div class="profile-circle">
        <img src="img/team11.jpg" alt="">
      </div>
      <div class="testimonial_content">
        <i class="fa fa-quote-left"></i>
        <p>XY kümmert sich im Verein um das Sponsoring. Sie erreichen Sie unter <br><b>XY</b></p>
      </div>
      <div class="testimonial_author">
        <h5>XY</h5>
        <p>XY</p>
      </div>
    </div>
    
    <div class="col-md-3">
      <div class="profile-circle">
        <img src="img/team11.jpg" alt="">
      </div>
      <div class="testimonial_content">
        <i class="fa fa-quote-left"></i>
        <p>XY kümmert sich im Verein um das Sponsoring. Sie erreichen Sie unter <br><b>XY</b></p>
      </div>
      <div class="testimonial_author">
        <h5>XY</h5>
        <p>XY</p>
      </div>
    </div>
    
    <div class="col-md-3">
      <div class="profile-circle">
        <img src="img/team11.jpg" alt="">
      </div>
      <div class="testimonial_content">
        <i class="fa fa-quote-left"></i>
        <p>XY kümmert sich im Verein um das Sponsoring. Sie erreichen Sie unter <br><b>XY</b></p>
      </div>
      <div class="testimonial_author">
        <h5>XY</h5>
        <p>XY</p>
      </div>
    </div>
    
    <div class="col-md-3">
      <div class="profile-circle">
        <img src="img/team11.jpg" alt="">
      </div>
      <div class="testimonial_content">
        <i class="fa fa-quote-left"></i>
        <p>XY kümmert sich im Verein um das Sponsoring. Sie erreichen Sie unter <br><b>XY</b></p>
      </div>
      <div class="testimonial_author">
        <h5>XY</h5>
        <p>XY</p>
      </div>
    </div>

  </div>
</div>
<!--End of item with active-->
 
Wenn ich den Block rausnehme wie auf dem Screenshot zu sehen ist wird die Seite viel Größer als vorher ihr seht es ja. Und mit eben nicht.
 

Anhänge

  • 2.png
    2.png
    946,2 KB · Aufrufe: 178
  • 1.png
    1.png
    13,7 KB · Aufrufe: 176
Du musst dich einloggen oder registrieren, um hier zu antworten.

Ähnliche Themen

SealedGamer
Speicherplatz auf C: verhält sich komisch
2
Antworten
22
Aufrufe
1.415
Azghul0815
Azghul0815
N
Mauszeiger bewegt sich komisch
2
Antworten
20
Aufrufe
1.066
Marcoooo
Marcoooo
Andy4
Jetzt wirds komisch: Gmail ruft weiter meine Nachrichten ab, obwohl ich das Passwort geändert habe.
Antworten
12
Aufrufe
1.951
Andy4
Andy4
T
In HTML Code Text ersetzen über Eingabemaske
Antworten
10
Aufrufe
597
cumulonimbus8
cumulonimbus8
K
Text datei ist komisch
2
Antworten
20
Aufrufe
1.423
Keno76361
K
Zurück
Oben

Willkommen auf ComputerBase!

Mit Werbung weiterlesen

Besuche ComputerBase wie gewohnt mit Werbung und Tracking. Die Zustimmung ist jederzeit widerrufbar.

Details im Privacy Center und in der Liste unserer Partner. Ein Widerruf ist möglich in der Datenschutzerklärung.

… oder ComputerBase Pro bestellen

Nutze ComputerBase ohne Werbebanner, Video-Ads und Werbetracking schon für 4 €/Monat oder 36 €/Jahr.

Mehr zu ComputerBase Pro

Bereits Pro-Nutzer? Hier anmelden.

Tracking: Wir und unsere 170 Partner verarbeiten personenbezogene Daten, indem wir mit auf Ihrem Gerät gespeicherten Informationen (z. B. eindeutige Kennungen in Cookies) ein Nutzungsprofil erstellen, um z. B. Anzeigen zu personalisieren. Verarbeitungszwecke: Genaue Standortdaten und Abfrage von Geräteeigenschaften zur Identifikation, Informationen auf einem Gerät speichern und/oder abrufen, Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen.

Impressum Kontakt Datenschutz