I want to style the header after the menu to be the same as the header before the menu.
Here is the page: https://www.nikolay100.com/en/?option=com_rspagebuilder&view=page&id=6
I cannot figure out why the column of the "Language switcher" is displayed so big. I want it to be as small as the one on top.
Also I would like the footer background of the top footer to be displayed in full width of the page. The same as the footer bellow.
Which css styles should I change and how.
Any help will be really appreciated.
Language switcher: the class 'col-md-4' makes the width 33.33%. The html (with inline styling) will have the wanted result.
<div class="col-md-4 duration-500" style="text-align: right;">
<div id="lang_and_search" style="background-color:#efefef;padding:5px;width: auto;display: inline-block;">
<div class="rspbld-module" style="padding:5px;">
<div class="mod-languages">
<ul class="lang-inline" dir="ltr">
<li><img src="/media/mod_languages/images/bg.gif" alt="Български" title="Български">
</li>
<li class="lang-active">
<a href="https://www.nikolay100.com/en/?option=com_rspagebuilder&view=page&id=6">
<img src="/media/mod_languages/images/en.gif" alt="English (UK)" title="English (UK)"> </a>
</li>
</ul>
</div>
</div>
</div>
</div>
For the footer, it's because it's within the class 'container'. This has a max-width. Move the footer outside the container.
Related
Image of the sidebar
Hello, how I can put the "Déconnexion" element at the bottom of the sidebar, whatever the screen size of the user.
My code looks like that :
<div class="sidebar">
<div class="profil">
<div class="photo-profil">
<img src="img/users_pdp/zenitsu.jpg" alt="photo-profil">
</div>
<div class="nom">
<span>User</span>
</div>
</div>
<ul class="nav-links">
<li>Ma liste</li>
<li class="genres-li"><a>Genres <span class="arrow_carrot-down"></span></a>
</li>
<li>Films</li>
<li>Séries</li>
<li>Animes</li>
<li>Mon compte</li>
<li class="sign-out"><i class="fa fa-sign-out" aria-hidden="true"></i> Déconnexion</li>
</ul>
</div>
Looking from your image, it looks like you have absolute position for your sidebar.
Since you need the nav-list to take up entirety of the available space, you can make use of flex.
Make your sidebar as a display:flex, with flex-direction: column to retain the layout.
add flex: 1 to your nav-links to make it use of available space.
Change display property of nav-links to flex and direction as column
Add margin-top: auto to your sign-out to move it to the bottom.
Here is a working codepen example.
<div class="container-fluid text-center" style="background-color:#1a242f;">
<div class="row">
<div class="col-sm-2">
</div>
<div class="imageheader col-sm-4">
<a href="index.php">
<img class="img-responsive" src="images/logo & name.jpg">
</a>
</div>
<div class="search col-sm-4" style="padding-left : 12%;">
<ul class="list-group" style="background-color: #6ABED8;">
<li>
<a href="careersatbvimit.php" style="color: white;">
Career's At BVIMIT
</a> |
</li>
<li>
<a href="studentlogin.php" style="color: white;">
Student Login
</a>
</li>
</ul>
<br><br><br><br>
<p class="socialicons" style="color : #f4511e; margin-left: 40%;">
</p>
</div>
<div class="col-sm-2">
</div>
</div>
</div>
When I use img-responsive, the image becomes small when the
browser increases the "tablet-size". But is perfect for mobile-size and tablet-size browser.
When I change img-responsive to image-fluid, the image size
is what i want for the desktop-size browser.
But the <p> elements gets overlapped on it during the resizing of the browser. Also when I resize the browser to "mobile-size"(using image-fluid), I get a horizontal scroll-bar for my image since it doesn't resize and stays as it was on desktop-size browser.
What has to be removed in my code to make it responsive(with height and width being responsive) on all screens?
My second problem is that, i have to use an empty div from left for 2 cols to place my image at the center of the screen (third line from top). Can I place my div(using col-*-*) in the center without using any empty div tags. ? Is there any css code for that ?
I used padding-left : 12% to make the size of the <ul> small and be on the right side of the column. Can it be resized and placed on right without using padding-left ?
For your first problem, i found a quick fix by setting style="max-width:100%;height:auto;" on your image (max-width prevent the image to overflow, height auto keeps the proportions).
Your second problem is just a bootstrap class you are missing : col-XX-offset-X, in your example you need to set <div class=col-sm-4 col-sm-offset-2>
For your third question, you can avoid the padding by setting on your right aligned element a width and a left marginlike so :
<ul class="list-group" style="background-color: #6ABED8;width:60%;margin:0 0 0 auto">
Hope that helps
Hi I want to put my tripadvisor into a bigger div..(width, height)..and with width it's not a problem, but I can't strech to fit with the height too.. What can I do?
<div style="width:1000px; height:500px;">
<div id="TA_selfserveprop883" class="TA_selfserveprop">
<ul id="WFAboR" class="TA_links DuIxc6Zcnwl">
<li id="7njRA4" class="iXvW5GLL">
<img src="https://www.tripadvisor.com/img/cdsi/img2/branding/150_logo-11900-2.png" alt="TripAdvisor" />
</li>
</ul>
</div>
</div>
UPDATE:
Here is how it looks, I want to cover the part where is the arrow..to fit complete
Here image.
P.S: The width and height of the main are dynamic.
I have a simple web page with a navbar and some content.
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a id="about" href="#first">First section</a></li>
<li><a id="about" href="#second">Second section</a></li>
</ul>
</div>
<div class="container body-content">
<div class="row">
<div class="col-md-12">
<img alt="this should be my image" />
<h3 id="first">The first section</h3>
<p>... content ...</p>
<h3 id="second">The second section</h3>
<p>... content ...</p>
</div>
</div>
</div>
The navbar links to sections in the same page. Whenever a link is clicked, the page scrolls to the targeted element but the content gets overlapped by the navbar. Concretely, if the link to the first section is clicked (First) the page gets scrolled to the first h3 element, but the element is actually rendered under the navbar element How can this be fixed? See fiddle for details -- decrease the height of the results panel to better see the problem.
A CSS only solution would be to add padding to the h3 id and a negative margin to remove the redundant whitespace. For example:
#first, #second {
padding-top: 200px;
margin-top: -200px;
}
See my JSFiddle here.
I have the following Code. All elements should be in the same line in my header, so I've put them all to inline-blocks.
Now they all move down a bit because of the height of the picture.
If I move down the picture a bit with margin or padding the whole line moves down.
What would be the best approach to keep everything in a line and have the center of the picture be inline and not at the bottom as it is now?
<header>
<div id="headerBox">
<h1>hi</h1>
<p>hello<span>/</span> Pw <span>(ID123)</span></p>
<img src="plus.png" id="plus" />
<span id="kunden">Kunden/Projekt anlegen</span>
<input type="text" />
<img src="girl.png" id="girl">
<div id="navArrows">
<ul>
<li>Projektübersicht</li>
<li>Konfigurieren</li>
<li>Ergebnisse</li>
<li>Landingpage</li>
<li>Prüfen</li>
</ul>
</div>
</div>
</header>
To achieve this layout, one can use an unordered list with the CSS display property on each item set to inline-block.
<ul class="box">
<li>
<a href="#">
<img src="plus.png">
<h4>Your text</h4>
<p>Your text</p>
</a>
</li>
<li>
<a href="#">
<img src="girl.png">
<h4>Your text</h4>
<p>Your text</p>
</a>
</li><!-- more list items -->
</ul>
When the items have different heights, you’ll see some strange stacking issues. (The second item may be taller or shorter. With floats that fifth item catches on it.)
Instead of float, I give each list item a width and change the display from block to inline-block.
ul.box li {
width: 200px;
display: inline-block;
}
For more information about this styling, this tutorial may help:
http://blog.teamtreehouse.com/using-inline-block-to-display-a-product-grid-view
Hope this helps!
The solution to my Problem was the css attribute
vertical-align: text-top;
on the picture.
More about it here http://www.w3schools.com/cssref/pr_pos_vertical-align.asp