I have some code (using TailwindCSS) that sets up a simple two column grid. The image then spans 2 rows.
<div class="bg-purple-300 container mx-auto">
<div class="grid grid-cols-2">
<h1 class="text-7xl text-black">Hello world!</h1>
<img src="../public/images/Filip.jpg" class="row-span-2" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
lobortis eget ex ut semper. Suspendisse vel hendrerit tortor, ut
imperdiet metus. Vivamus sed nunc bibendum libero tincidunt luctus vel
a libero. Donec sit amet pellentesque quam. Interdum et malesuada
fames ac ante ipsum primis in faucibus. In sodales est id lectus
laoreet vehicula. Curabitur eget sodales quam. Curabitur eu metus
lectus. Aliquam maximus, dolor at vulputate molestie, mi erat commodo
purus, id pharetra lorem nisi in massa.1
</p>
</div>
</div>
The output looks like this:
Ideally, I'd like there to be zero space between the title and the paragraph. Any idea how to do this?
Use 3 rows for the image and the last row will consume that space and you won't notice any difference with a 2 rows configuration.
<script src="https://cdn.tailwindcss.com"></script>
<div class="bg-purple-300 container mx-auto">
<div class="grid grid-cols-2">
<h1 class="text-7xl text-black">Hello world!</h1>
<img src="https://picsum.photos/id/1/400/400" class="row-span-3" >
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
lobortis eget ex ut semper. Suspendisse vel hendrerit tortor, ut
imperdiet metus. Vivamus sed nunc bibendum libero tincidunt luctus vel
a libero. Donec sit amet pellentesque quam. Interdum et malesuada
fames ac ante ipsum primis in faucibus. In sodales est id lectus
laoreet vehicula. Curabitur eget sodales quam. Curabitur eu metus
lectus. Aliquam maximus, dolor at vulputate molestie, mi erat commodo
purus, id pharetra lorem nisi in massa.1
</p>
</div>
</div>
Related
In a div I put on the right with Bootstrap, I want the outer text to continue where the text inside the div ends. the shape I want is in the picture. how can I do it?
You can float the image to the right, and not clear the float after. Any text after the image will wrap to the next line.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body class="m-4 border">
<div>
<h2 class="p-4 border-bottom">Title</h2>
<div class="p-4">
<img src="https://data.whicdn.com/images/323513059/original.jpg" alt="Random Image" style="height: 300px; width: auto;" class="float-end">
<p>
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Curabitur arcu erat,
accumsan id imperdiet et, porttitor at sem. Pellentesque in ipsum id orci porta dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies ligula sed magna dictum porta. Vestibulum ac diam sit amet quam vehicula elementum
sed sit amet dui. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Curabitur aliquet quam id dui posuere blandit. Curabitur aliquet quam id dui posuere blandit. Curabitur aliquet quam id dui posuere blandit. Nulla porttitor accumsan
tincidunt. Nulla porttitor accumsan tincidunt. Donec sollicitudin molestie malesuada. Donec rutrum congue leo eget malesuada. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus suscipit tortor eget felis porttitor volutpat. Pellentesque
in ipsum id orci porta dapibus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Proin eget tortor risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget tortor risus. Curabitur arcu erat, accumsan id imperdiet
et, porttitor at sem. Curabitur aliquet quam id dui posuere blandit. Donec rutrum congue leo eget malesuada. Pellentesque in ipsum id orci porta dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec
velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Donec sollicitudin molestie malesuada. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
Curabitur aliquet quam id dui posuere blandit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur arcu erat, accumsan id imperdiet et, porttitor at
sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Proin eget tortor risus. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Donec sollicitudin molestie malesuada. Nulla porttitor accumsan tincidunt. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla porttitor accumsan tincidunt.
Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel,
ullamcorper sit amet ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis lorem ut libero malesuada feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor
sit amet aliquam vel, ullamcorper sit amet ligula. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vivamus suscipit tortor eget felis porttitor volutpat.
</p>
</div>
</div>
</body>
</html>
The external image is working.
I want to display HTML content with <img src='https://localhost:3000/static/media/image.jpg' alt='tutorial' /> image from my src folder.
The HTML text part is working.
JSON
[
{
"title": "Sample Blog",
"image": "https://source.unsplash.com/12mi25fTAmM/538x302",
"content" : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis sem ut diam lacinia placerat. Vestibulum pharetra velit sit amet bibendum faucibus. Phasellus sit amet scelerisque diam. Suspendisse potenti. Nulla quis odio quis arcu venenatis condimentum. Proin lectus est, suscipit a lorem non, blandit vestibulum lacus. Sed eu volutpat eros. <a href='/#'> Aenean</a> ullamcorper orci vulputate lectus maximus blandit. Fusce leo mauris, tempus non cursus id, scelerisque aliquet ante. Fusce venenatis, orci nec sollicitudin consectetur, sapien velit ultrices purus, eget suscipit quam mauris ut ipsum. Praesent pulvinar nunc id scelerisque vehicula. Nunc vitae leo eleifend, finibus metus non, varius libero.<br> <img src='https://i.imgur.com/ltL1nJc.png' alt='tutorial' /> Fusce nisl leo, faucibus quis massa sed, ornare cursus augue. Donec at lorem tortor. Phasellus porttitor nisi sit amet dui pellentesque interdum. Vestibulum tempor velit sit amet viverra ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce odio ex, mattis id libero non, posuere ullamcorper mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam venenatis molestie consectetur. Etiam luctus eu diam et imperdiet. Vestibulum imperdiet elementum nibh. Sed quis dui et orci facilisis fermentum. Nam laoreet molestie dui, ac iaculis nisl convallis non. Aenean ultricies hendrerit sem nec tempor. Donec fringilla fermentum lorem, at pharetra odio pretium vel. Donec eget nisl ullamcorper, finibus nibh ut, ornare arcu."
},
{
"title": "Sample Blog 2",
"content": "Fusce odio ex, mattis id libero non, <br> <img src='http://localhost:3000/image.png' alt='tutorial' /> posuere ullamcorper mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam venenatis molestie consectetur. Etiam luctus eu diam et imperdiet. Vestibulum imperdiet elementum nibh. Sed quis dui et orci facilisis fermentum. Nam laoreet molestie dui, ac iaculis nisl convallis non. Aenean ultricies hendrerit sem nec tempor. Donec fringilla fermentum lorem, at pharetra odio pretium vel. Donec eget nisl ullamcorper, finibus nibh ut, ornare arcu.",
"image": "https://source.unsplash.com/WLUHO9A_xik/538x302"
}
]
JS
{data.map(({title, content, image}, index) => (
<div key={index}>
<div className="card mb-3">
{image ? <img src={image} className="img-about" alt={ title} /> : ''}
<div className="card-body">
<h6>{ title }</h6>
<ShowMoreText
lines={3}
more='[view more]'
less='[view less]'
anchorClass='view-more'
onClick={this.executeOnClick}
expanded={false}
>
<p className="card-text" dangerouslySetInnerHTML={ {__html: content} } />
<div className="fbcomments">
<FacebookProvider appId="639804143068124">
<Comments href={window.location.href + title} data-numposts="1" width="500" />
</FacebookProvider>
</div>
</ShowMoreText>
<br></br>
<FacebookProvider appId="639804143068124">
<Like href={window.location.href + title} colorScheme="light" showFaces share />
</FacebookProvider>
</div>
</div>
</div>
))}
How to display html content with image inside json file? Reactjs, JSON
Short: You need to use different string delimiters.
In your JSON code you use " to delimit the keys and values.
You are trying to have that image source as a string within JSON,
thus you need to:
either escape the delimiters: \"https://localhost:3000\"
or use different delimiters like 'https://localhost:3000'
This question already has answers here:
Expand a div to fill the remaining width
(21 answers)
Closed 5 years ago.
I have read countless posts on this topic however I am yet to find a solution that works. I simply want to have two divs side by side with the LHS div being the width of the FA char and the RHS div being the remainder.
<div class="helper">
<div class="text-info"><i class="fa fa-info-circle fa-2x"></i></div>
<div class="text-muted">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non tincidunt ante. Duis a est ipsum. Morbi vulputate neque vitae nibh sodales gravida. Etiam viverra vulputate est nec faucibus. Nullam volutpat sagittis augue, et mattis nisi facilisis vel. Nunc eu dignissim lectus, vitae venenatis nisi. Proin euismod, enim nec pulvinar maximus, mi justo luctus odio, in tristique dolor augue nec lacus.
</div>
</div>
Not sure what you're trying to do but you could use something like Flexbox which is in the JS fiddle here.
Alternatively you could do something like this:
HTML
<div class="helper">
<div class="text-info">FA</div>
<div class="text-muted">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non tincidunt ante. Duis a est ipsum. Morbi vulputate neque vitae nibh sodales gravida. Etiam viverra vulputate est nec faucibus. Nullam volutpat sagittis augue, et mattis nisi facilisis vel. Nunc eu dignissim lectus, vitae venenatis nisi. Proin euismod, enim nec pulvinar maximus, mi justo luctus odio, in tristique dolor augue nec lacus.
</div>
</div>
CSS
.text-info, .text-muted {
float:left;
}
.helper {
clear:both;
}
If you want both of them to have different widths, you can simply set the widths of each (using %, px or whatever).
Set display:table-cell to your content and icon will give the desired output. Check below snippet.
.inline {
display: table-cell !important;
width: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="helper">
<div class="text-info"><i class="fa fa-info-circle fa-2x inline"></i></span>
<div class="text-muted inline">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non tincidunt ante. Duis a est ipsum. Morbi vulputate neque vitae nibh sodales gravida. Etiam viverra vulputate est nec faucibus. Nullam volutpat sagittis augue, et mattis nisi facilisis vel.
Nunc eu dignissim lectus, vitae venenatis nisi. Proin euismod, enim nec pulvinar maximus, mi justo luctus odio, in tristique dolor augue nec lacus.
</div>
</div>
I believe this is what you're going for :
.text-muted {
display: table-cell;
}
.text-info {
padding-right: 10px;
display: block;
float: left;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="helper">
<div class="text-info"><i class="fa fa-info-circle fa-2x"></i></div>
<div class="text-muted">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non tincidunt ante. Duis a est ipsum. Morbi vulputate neque vitae nibh sodales gravida. Etiam viverra vulputate est nec faucibus. Nullam volutpat sagittis augue, et mattis nisi facilisis vel. Nunc eu dignissim lectus, vitae venenatis nisi. Proin euismod, enim nec pulvinar maximus, mi justo luctus odio, in tristique dolor augue nec lacus.
</div>
</div>
See also this Fiddle.
I am using Bootstrap 3. I have text on the left of the page and an image on the right. I am trying to get the text to wrap around an image. I've seen example of this for left aligned images, but I can't seem to get the opposite to work.
To show the error, I have created an example on JSFiddle.
There is a TITLE, then a banner, that should be half the page. They hockey player image should be to the right of the banner and the tops of the 2 images should be aligned, the text should start immediately under the banner, then wrap under the hockey player image. Like a newspaper layout.
<div class="row">
<div class="col-xs-12 col-sm-7">
<h2>My Title</span></h2><!-- should be left aligned-->
<img src="/img/title_image.png" class="img-responsive"/><!--Should be left aligned-->
</div>
<div class="col-xs-12 col-sm-5 pull-right">
<h2> </h2>
<img src="/image_on_right_text_to_wrap_around.png" class="img-responsive"/>
</div>
<div class="col-xs-12">
<!-- This text should be under the title image and wrap underneath the larger image on the right-->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
</p>
</div>
<div class="col-xs-12">
MORE TEXT HERE
Example Layout here
This may be what you want:
<div class="media">
<div class="media-body">
<h4 class="media-heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.</h4>
...
</div>
<div class="media-left media-middle">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
</div>
Is this what you want?I made couple of divs and made it looks simple, you haven't added specific row to your header image, becausse of that both images started to stack inline.And i changed the columns divs.
CODEPEN exapmle
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="row">
<div class="col-xs-12 col-sm-7">
<h2>My Title</span></h2><!-- should be left aligned-->
<img src="http://paradigmmedia.co.uk/wp-content/uploads/header-b88d930b520c523ef8a53abfb86d7523.png" class="img-responsive"/><!--Should be left aligned-->
</div>
</div>
<div class="row">
<div class="col-xs-5 col-sm-5 pull-right">
<img src="https://lh3.googleusercontent.com/nhzkOTPaoWAYfO-LeklB_kPd5bAqm43D87Q3eHlK3alIse8rgrYPE74epbbbZ2b4EsY=w300" class="img-responsive"/>
</div>
<div class="col-xs-7">
<!-- This text should be under the title image and wrap underneath the larger image on the right-->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
</p>
</div>
</div>
</div>
</div>
Basically, any UI Framework(Bootstrap) depend on a grid. So you have to do separation of each block and put text different column and image have to put in different column.
.bg-img{
height:200px;
background-image: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRSZQsdLrY0gp9N9JoGJlQ-Bo4AELr4TKcNZGY-DB756oozHCFL");
background-repeat: no-repeat;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-5 col-sm-5">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia</p>
</div>
<div class="col-xs-7">
<p>
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRSZQsdLrY0gp9N9JoGJlQ-Bo4AELr4TKcNZGY-DB756oozHCFL" class="img-responsive"/>
</p>
</div>
</div>
<div class="row">
<div class="col-xs-5 col-sm-5">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRSZQsdLrY0gp9N9JoGJlQ-Bo4AELr4TKcNZGY-DB756oozHCFL" class="img-responsive"/>
</div>
<div class="col-xs-7">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia.
</p>
</div>
</div>
<div class="row">
<div class=" col-sm-6">
<div class="bg-img">
<h4> Lorem ipsu6 dolor sit amet</h4>
</div>
</div>
<div class="col-sm-6">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
</div>
In above snippet I have taken 3 rows. In first row I am setting image in left side, In second row image set in right side and third row image set into first row with text on image. you can run my snippet. Good luck. happy to help.
I have solved with with bootstrap 3, it now behaves correctly:
https://jsfiddle.net/cec9086a/
<div class="container">
<div class="jumbotron">
<div class="row">
<h2>
My Title
</h2>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 pull-left">
<img src="http://cliparts.co/cliparts/piq/rGa/piqrGaGyT.png" class="img-responsive"/>
</div>
<div class="col-xs-12 col-sm-6 pull-right">
<img src="http://www.legendsofhockey.net/LegendsOfHockey/members/splash/P197702S.jpg" class="img-responsive pull right"/>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
</p>
</div>
</div>
</div>
I'm trying to assign different anchors to different divs, but they don't seem to be taking effect. I've tried using <a name="anchor">, <a id="anchor">, and <div id="anchor"> (which worked with some divs, but not all).
This is my current HTML:
<div class="about">
<a name="nabout"></a>
<div class="section">
<div class="section-title job-section-header section-header section-subheader">
<div class="section-bar"></div>
<img src="images/about-photo.png" class="left-image" />
</div>
<div class="section-body jobs">
<p class="section-subtext-md section-subtext section-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis nulla a eros porttitor, ut congue elit commodo. Nunc ut dapibus elit. Suspendisse euismod rhoncus felis, id vulputate mauris posuere vitae. Praesent bibendum maximus nibh, nec
tempor diam blandit in. Praesent non metus in odio vehicula cursus vulputate quis quam. Nulla varius massa ac libero commodo imperdiet. Fusce tincidunt metus sapien, sed fringilla nibh vulputate eget. Suspendisse sodales nisi quis hendrerit porttitor.
Morbi in augue sapien. Maecenas ultricies, nisl vitae vehicula vulputate, nunc tellus sagittis turpis, nec laoreet quam velit non nunc. In aliquam libero a tellus commodo, at aliquet risus imperdiet. Fusce finibus a nulla et facilisis. Maecenas
condimentum sit amet velit et sodales. Duis mauris augue, feugiat non ornare pharetra, convallis nec metus. Integer vitae consequat dolor, at tristique lorem.</p>
<p class="section-subtext-md section-subtext section-text">Cras libero massa, fringilla id condimentum ut, aliquam ut nisi. Vestibulum ullamcorper commodo elit at commodo. Nullam dignissim id lacus sed faucibus. Quisque sollicitudin quam sit amet est facilisis tempor. Morbi vehicula quam et mauris faucibus
semper. Etiam vel est eu magna viverra viverra. Donec venenatis, nisl eget rhoncus auctor, lorem est gravida magna, ac consectetur velit libero at turpis. Vivamus at quam sed arcu eleifend suscipit non id mauris. Pellentesque tempor ornare imperdiet.
Morbi ornare luctus imperdiet. Fusce sagittis lorem ut elementum fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div style="clear: both;"></div>
</div>
</div>
Why does <a name> not work sometimes and what should I be using in this case?
The way that HTML anchors works is as follows.
When you give a div or any other DOM object an id attribute, you can then "link" to that object by specifying that id, with a # in your href, to have an a tag link to that tag.
For example:
HTML
Testing
...
<div id="testing">
<h1>Testing DIV</h1>
</div>
By clicking on the above <a> tag, the user's browser will scroll until the very top of the #testing div is at the top of the page, assuming the browser has space to scroll.
Try this
Test
.........
<a name="test"></a>
<h1>Testing</h1>
or this
Test
.......
<div id="test">
<h1>Test</h1>
</div>
I'm not 100% sure why it's not jumping to the location on load, but if you add this javascript
window.location.href = window.location.hash;
to the bottom of the page, that should fix your problem.