Tripadvisor fit to main div - html

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.

Related

<li> in the bottom of sidebar

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.

header and footer column width problem - joomla

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.

Bootstrap problems with img-responsive and div tags

<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

How to set up a height for a <div> in responsive css designs?

I am trying to make a responsive website. My issue is if i am not setting a div height then the bottom of the div content has come up and overlay with the top div contents. Also if I sets a height, when i see it in responsive it takes the full height and show white space. Can you guys please sort it out?
You want something like this:
<div style="height:20%"> CONTENT </div>
or
<div style="height:40px"> CONTENT </div>
use % to specify the amount of space your div will get in your current container or px for the number of pixels
http://www.w3schools.com/cssref/pr_dim_height.asp
Friends, this is my sample coding
<div class="row clearfix">
<div class="left-banner">
<img src="" alt="">
</div>
<div class="right-banner">
<img src="" alt="">
</div>
</div>
<div class="container">
<p></p>
</div>
CSS part:
.row{width:100%;}
.left-banner{float:left; width:60%;}
.right-banner{float:right; width:40%; display:none;}
.container{width:100%;}
For mobile responsive, I want to hide the right banner div so I did 'display: none;' but the container div came up and overlay with the row div. I just want to hide the right banner without any affect of other divs.

Fluid width HTML list item using CSS

Is it possible to create a fluid width LI with background imaage that adjusts its size based on content and doesn't follow the width of a parent DIV.
If possible, using only CSS.
<div id="navbody">
<!--Button Start-->
<ul id="button">
<li>
Home
<div class="btnright"></div>
</li>
<li>
About Us
<div class="btnright"></div>
</li>
</ul>
<!--Button End-->
</div>
LI contains a background:
NOTE: this has an irregular left shape
Then a DIV is used to end the irregular right shape
The menu is contained in a parent div with a fixed width
[ ]
[[ Home ] [ About Us ] ]
As you can see, I want the LI's to auto adjust based on content.
Oh. I didn't understand your question properly until you posted the code sample.
Here's a mock-up:
<div style="width: 500px;border: 1px solid Blue;">
<ul style="padding-left:0;margin-left:0;">
<li style="list-style-type: none;">
<div style="float:left; height:24px;width:20px;background-color:Green;"></div>
<div style="float:left;height:24px;background-color:Yellow;">Some content here</div>
<div style="float:left; height:24px;width:20px;background-color:Red;"></div>
<div style="clear:both;">
</li>
<li style="list-style-type: none;">
<div style="float:left; height:24px;width:20px;background-color:Green;"></div>
<div style="float:left;height:24px;background-color:Yellow;">Some other content here</div>
<div style="float:left; height:24px;width:20px;background-color:Red;"></div>
<div style="clear:both;">
</li>
</ul>
</div>
The green div is your left part of the image, the red one is your right part of the image and the yellow one is your repeating center of the image. To do this you should slice your image into these 3 parts and add them as backgrounds for the 3 divs. Just fiddle with the dimension to make it suite your desired output.
Hope this helps,
Alin