I am trying to have a selection area at the top of the window where several different page links exist. This will include so many links that each page will have an image. They will not fit into the width of the page, so I would like them to display on one row and have a scrollbar to the right so that users can scroll through a horizontal list and click whichever link of a page a user would like to view. When users click the link it ought to appear in the content area below the selection area. Please refer to the image for a visual reference.
<div style="max-width: 680px; max-height: 200px; white-space: nowrap; overflow: AUTO;">
<div style="border: 3px solid; max-width: 200px; max-height: 200px; float: left; margin: 5px;">
<center>Ford Thunderbird Gallery</center>
<a href="index.php?option=com_content&id=127&tmpl=component&TB_iframe=true&height=680&width=680" target="gallery">
<img src="images/InstallationGallery/FordThunderbird/IMG_0016.png" width="200" >
</a>
</div>
<div style="border: 3px solid; max-width: 200px; max-height: 200px; float: left; margin: 5px;">
<center>2012 Ford Expedition Gallery</center>
<a href="index.php?option=com_content&id=128&tmpl=component&TB_iframe=true&height=680&width=680" target="gallery">
<img src="images/InstallationGallery/2012Expedition/P1040672.jpg" width="200" >
</a>
</div>
</div>
<iframe height="680" name="gallery" scrolling="no" width="680"></iframe>
Try working with display:table(-row)(-cell) instead of floating:
http://jsfiddle.net/DxZbV/1/
Oh and also try not to use inline styles - makes your code pretty messy and hard to handle...
Related
Hi!
I'm using bootstrap 4 and making my own project. After some time I found a problem which I can't fix. I have placed an image into a div section and made the div to be 200px of height & width and overflow will be hidden. Then I made the height of the image 100% of the div and gave a background color(bg-light) and border(5px solid black) to the div. But the background color is seen 1px left, top and right of the div and the image is placed after the 1 px left, right and top.
HTML:
<div class="profile-image-container">
<img class="profile-image" src="image.jpg" />
</div>
CSS:
.profile-image-container{
width: 200px;
height: 200px;
border: 5px solid black;
overflow: hidden;
}
.profile-image{
height: 100%;
}
I didn't understand your question properly.. please tell us what you want as a output.
Find the code below, whatever I understand so far
<img class="profile-image" src="img.jpg" width=100% />
Below is the code from the original question, with a placeholder image.
Unlike the image posted to the question, there is no white border between the enclosing div and the image.
The may be some additional CSS that was not included in the question to account for the white border between the div and the image.
.profile-image-container{
width: 200px;
height: 200px;
border: 5px solid black;
overflow: hidden;
}
.profile-image{
height: 100%;
}
<body style="background-color:#e0e0e0; padding:0.5rem">
<div class="profile-image-container">
<img class="profile-image" src="https://via.placeholder.com/210x200" />
</div>
</body>
I have a element div and an anchor tag that displays it's name. It's text is going outside the div. How to control this text?
<div class="col-md-6">
<a style="border: 1px solid #d1d1d1;
margin-top: 5px;
padding: 10px;
overflow: hidden;
min-height: 345px;
min-width: 221.46px !important;
max-width: 230.46px !important;" href="http://localhost/hostname/MDLIncidentMgmt/IM_TicketDetail.aspx?ID=abcsfstw%3d%3d" target="_blank" class="notranslate">http://localhost/hostname/MDLIncidentMgmt/IM_TicketDetail.aspx?ID=abcsfstw%3d%3d
</a>
</div>
I understood that this is happening because you are doing this:
http://google.com
Since in a link all everything is connected with each other this can't be separated normally. So you should use something like this instead of that:
Link
Or, you can also use a button here:
<a href="http://google.com">
<button class="btn btn-priamary">LINK</button>
</a>
Or, if you certainly want to do as you have, you should do something like this:
<div style="width:200px">
<a href="..." style="word-break: break-all;">
https://stackoverflow.com/questions/61143433/anchor-text-going-
outside-div-section/61143889#61143889
</a>
</div>
That'll solve your problem Insaallah.
Not entirely sure what you are trying to accomplish but if you want it to just fit inside the div remove the width stuff and just make it inline-block since you cant apply width or height to inline elements which an anchor tag defaults to
<div class="col-md-6"><a style="border: 1px solid #d1d1d1;
margin-top: 5px;
padding: 10px;
display: inline-block;
min-height: 345px;" href="http://localhost/hostname/MDLIncidentMgmt/IM_TicketDetail.aspx?ID=abcsfstw%3d%3d" target="_blank" class="notranslate">http://localhost/hostname/MDLIncidentMgmt/IM_TicketDetail.aspx?ID=abcsfstw%3d%3d</a></div>
I'm trying to integrate a scroll bar in the following div of my HTML template, and want the "box" to always show, even when empty. But when I do overflow: scroll, only part of the box borders appear (on the right and bottom side, but not on the top and left side). How can I fix this?
<div class="col-sm-6">
<h1>Results</h1>
<br><br>
<div style="width: 500px; overflow: scroll; height: 400px;">
<br>
<p class="my-results"></p>
</div>
</div>
You will need to add a border style property as well. The overflow: scroll has nothing to do with top and left borders.
<div style="width: 500px; overflow: scroll; height: 400px; border: solid 1px #ccc">
...
</div>
I have a website that im working on and there is a box with some links it it. I want this box to be the same size as the images around it. Right now the problem is that when the window size gets smaller the images will scale smaller or larger but this div with these links does not scale the same way.
Here is a image (left box is the links, images are surrounding it):
Here is html for the download box and images:
<div class="appDownload">
<header class="downloadHeader"><span class="downloadTitle">Download</span></header>
<!--Apple App Store</br>
Google Play Store</br>
Amazon App Store</br> -->
<a href="https://itunes.apple.com/us/app/igun-pro-hd/id574123647?mt=8" target="_blank">
<div class="appStoreBadge"><img src="images/App_Store_Badge135x40.svg" width="100%"></div>
</a>
<a href="https://play.google.com/store/apps/details?id=com.avidionmedia.iGunHD" target="_blank">
<div class="appStoreBadge"><img
src="images/Google_Play_Badge564x168.png" width="100%"></div>
</a>
<a href="http://www.amazon.com/iGun-Pro-Original-Gun-App/dp/B00G4E1DOI" target="_blank">
<div class="appStoreBadge"><img
src="images/Amazon_Badge564x168.png" width="100%"></div>
</a>
</div>
The images:
<div class="appScreenshots">
<img id="screenshot1" width="100%" src="images/igp1_screenshot_1.png">
<img id="screenshot2" width="100%" src="images/igp1_screenshot_3.png">
<img id="screenshot2" width="100%" src="images/igp1_screenshot_5.png">
<img id="screenshot2" width="100%" src="images/igp1_screenshot_7.png">
</div>
This is the download box css:
.appDownload{
width: 100%;
margin: 0px 0px 3px 0px;
background: #333;
float: left;
}
And this is the css for the images:
.appScreenshots{
width: 100%;
margin: 0px;
background: transparent;
overflow: hidden;
}
.appScreenshots img{
float: none;
clear: none;
}
I've got 2 divs on top of another div, but when I resize the window they stay put, instead of moving with the div behind them. I thought that if there position is relative they move along with the previous div, but it doesn't seem to work like this. What am I missing?
CSS and HTML below, simplified.
<div class="wrapper" style="margin: 0 auto; text-align: center;">
<div id="0">
<img src="0.gif" width="960px" alt="" />
<div class="top">
<div id="tag" ><img src="tag.png" alt="" /></div>
<div id="tag2"><img src="5500.png" alt="" /></div>
</div>
</div>
</div>
And CSS like this:
#0 {
clear: right;
z-index: 0;
}
.top {
float: left;
z-index: 1;
clear: left;
position: relative;
}
#tag {
margin-top: -500px;
margin-left: -600px;
}
#tag2{
margin-left: 750px;
}
It seems like you're expecting the top div, with its associated tag divs, to move with the 0.gif image when you resize the page. Instead, it's moving relative to the left edge of the wrapper div, which is pegged to the left-hand side of the screen. You will probably get the result you want by adding width: 960px to the style of your .wrapper div.
For further enlightenment, check the bounding boxes on each of your divs. You may find that a temporary border: 2px solid green style helps clear things up.