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>
Related
Im fairly new to HTML and CSS.
I've got these 5 boxes, but I want to move the 2 boxes, underneath the top boxes so that there aligned in the space between.
See picture
Here my CSS is.
.box a{
margin-left: 150px;
margin-top: 10px;
text-align: center;
display: inline-block;
background: yellow;
padding: 15px 30px;
border: 1px solid green;
width: 150px;
height: 40px;
text-decoration: none;
color: lightskyblue;
}
And here my HTML is.
<div class="box">
<a th:href="#{info}">Info page</a>
<a th:href="#{responsibility}">Responsibility page</a>
<a th:href="#{what_we_do}">What we do</a>
<a th:href="#{profile}">Profile</a>
<a th:href="#{#}">Picture to come</a>
</div>
Hope someone can help me figure out the issue. Thank you.
You should separate the rows in different divs
like this:
<div class="box">
<div class="row1">
<a th:href="#{info}">Info page</a>
<a th:href="#{responsibility}">Responsibility page</a>
<a th:href="#{what_we_do}">What we do</a>
</div>
<div class="row2">
<a th:href="#{profile}">Profile</a>
<a th:href="#{#}">Picture to come</a>
</div>
</div>
And make the second row flexible and give it justify-content: space-between like this:
.row2{
display:flex;
justify-content: space-between
}
Like this the flexible div child elements will take that div space in a flexible way and it will adapt considering the size of the parent div
Ill add you more info about "flex" display to make you understand it more deeply:
https://developer.mozilla.org/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
I've been looking all over for an answer to this but I can't find a fix anywhere. I'm just trying to move the h1 tag right over top of the icons but whenever I use margin-top or padding-top to move the h1 down the page it moves the column down as well. I put borders around all of the columns around there to see if maybe the borders were touching but that was no help. Is there like some sort of default padding around h1's or columns that you can't see?
Here is a link to my codepen: https://codepen.io/4eller/pen/eVmxeM
HTML:
<hr width="35%">
<div class="container maincon2">
<h1 class="wwd">Social Media Has Never Been Easier</h1>
<hr class="hr1">
<h1 class="whatwedo">What makes us stand out from the rest</h1>
<div class="row topicons">
<div class="col-md-4 maintab1">
<img src="images/graph.png" class="barimg">
<hr width="50%" id="hr2">
</div>
<div class="col-md-4 maintab2">
<img src="images/piggy-bank.png" class="pigimg">
<hr width="50%" id="hr2">
</div>
<div class="col-md-4 maintab3">
<img src="images/support.png" class="supportimg">
<hr width="50%" id="hr2">
</div>
</div>
</div>
</div>
</div>
<div class="container maincon3">
<div class="row">
<div class="col-lg-12 mediumcon2">
<hr class="hrgreen">
CSS:
.maincon2 {
width: 100%;
height: 500px;
background: #424242;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
border: 1px solid orange;
}
.topicons {
border: 1px solid red;
margin-top: 70px;
height: 250px;
table-layout: fixed;
}
If I understand correctly what you want (not really 100% clear), you can apply position: relative to that tag and use top to move it down without affecting anything else, since position: relative plus position settings cause an element to be moved in relation to its original (static) position, but elements before and after it will remain were they are:
h1.whatwedo {
position: relative;
top:30px;
}
Changed codepen: https://codepen.io/anon/pen/MQYRKY
Give the h1 tag position:absolute; and then move it left with left:200px(replace 200 with whatever number you want)
The reason why when using margin, padding or position:relative, it will move other elements, is because then they are considered part of the "flow" of the page, meaning they will interact with and bump other elements around. position:absolute, removes the target element from the flow of the page, thus allowing you to put it wherever without moving other elements.
This here is my html source code:
<a href="#section-1">
<img src="/images/site-images/scrolldown2.png" style="display: block; margin:auto;">
</a>
When i try to use it this way to make my image with a width of 196px link to somewhere, the link spans the entire page width.
I only want the link to be available when hovering over the image.
EDIT: The image needs to stay centered horizontally.
To align the image, and get what you requested:
Place a class (so that you can style it), remove the inline styles of the image, and specify the width of the a and by using the auto left and right margins (and because we specified a width) it will align it to the centre.
HTML
<a href="#section-1" class="link">
<img src="/images/site-images/scrolldown2.png">
</a>
CSS:
.link {
display: block;
width: 196px;
margin: 0 auto;
}
Use this:
<a href="#section-1" style="margin: 0px auto; display: block; width: 196px">
<img src="/images/site-images/scrolldown2.png" style="display: block;">
</a>
or absolute position:
<a href="#section-1" style="position: absolute; left: 50%; margin-left: -98px; display: block; width: 196px">
<img src="/images/site-images/scrolldown2.png" style="display: block;">
</a>
Add a class to your code
<a class="my_link" href="#section-1">
<img src="/images/site-images/scrolldown2.png" style="display: block; margin:auto;">
</a>
Fiddle http://jsfiddle.net/thiswolf/hMR9a/1/
This makes the image not clickable
.my_link{
pointer-events: none;
}
This makes the image clickable
.my_link:link{
cursor:pointer !important;
pointer-events: auto;
}
This is what I have:
That screenshot is as wide as my screen. As you can see, the image is stuck to the left side of the screen, and the Level information section is stuck to the right side of the image. That's what I want. However, I'd also like for the border around the Level information section to extend all the way to the right edge of the screen, like this mock-up I made in MSPaint:
Here is the code for that part of the page:
<div class="levelinfo" style="margin: 10px;">
<span style="display: inline; float: left; margin-right: 10px; ">
<img src="levels/googoogjoob - By Request Only v1.1.screen.png" alt="Screenshot">
</span>
<span style="display: inline-block; float: left; height: 240px;">
<fieldset style="margin: 0px; padding: 0px; height: 239px;">
<legend>Level information</legend>
<ul style="list-style-type: none; padding: 0px; margin: 5px;">
[snip]
</ul>
</fieldset>
</span>
</div>
Sub-question: As you can see, I'm using a fieldset to create that pretty little border around the list. However, using a fieldset for purely cosmetic purposes doesn't seem very "semantic". Is there any method of getting that effect with CSS, or at least some other, more preferable HTML tag? Or do you think using a fieldset is fine?
I would normally just put it in a div again or a table and do width=100% and that works everywhere
thanks
This should be simple. take all your content and wrap it in another div called "wrapper" or something like that. give that div a width of 100% and also, give that div a border of whatever you want.
for example
your HTML like this:
<div id="wrapper"> <!-- this is the div youll give the style to, to get the outline etc. -->
<div class="levelinfo" style="margin: 10px;">
<span style="display: inline; float: left; margin-right: 10px; ">
<img src="levels/googoogjoob - By Request Only v1.1.screen.png" alt="Screenshot">
</span>
<span style="display: inline-block; float: left; height: 240px;">
<fieldset style="margin: 0px; padding: 0px; height: 239px;">
<legend>Level information</legend>
<ul style="list-style-type: none; padding: 0px; margin: 5px;">
[snip]
</ul>
</fieldset>
</span>
</div>
</div>
css:
#wrapper{
width:100%;
border: thin #ccc solid;
}
and that should be it. when you reload your page, you should see your already made content
wrapped around the border.
Hope it helps ya.
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...