Need Help


#1

I am making my own webpage. I want to ask one thing.

I want a small image in between the “Mukul Vashishtha” and “Contacts” i.e, horizontal center. I also want to change the background color of all the area above the background image. Useful information is given below.
Any help is appreciated. @stetim94
Thanks



<!DOCTYPE html>
  <html>
    <head>
	  <meta charset="utf-8">
	  <title> Mukul Vashishtha </title>
      <link href="style.css" type="text/css" rel="stylesheet"> 
	</head>

	<body>
	  <div class="in">
	      <ul>
            <li><a href="#">Contacts</a></li>
			<li><a href="#">Profiles</a></li>
		    <li><a href="Resume.pdf">Resume</a></li>
			<li><a href="about.html">About</a></li>
		    <li><a href="text.html">Home</a></li>
          </ul>
	      <h1 id="name"> Mukul Vashishtha </h1>
	  </div>
	  
	  <h1 id ="more"> Hi, I am Mukul. Let me introduce you. </h1>
	<!--  <a href="6.jpg" target="_blank"><img src="6.jpg" id="img"/></a> -->
 	</body>
  </html>


* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body, html {
	min-height: 100%;
}

li {
	display: inline-block;
	float: right;
	font-size: 20px;
	padding: 15px;
	width: 5em;
}

a {
	text-decoration: none;
}

#name {
	font-style: Italic;
	margin: 0.5em;
	display: block;
}

#more {
	text-align: center;
	padding: 200px;
	color: white;
	background-image: url('1.jpg');
	background-size: 100%;
	background-repeat: no-repeat;
}


#2

html works for left to right and top to bottom just like humans read (in a big part of the world), so if you want the h1 on the left of the unordered list it would make sense to place h1 before unordered list:

<h1></h1>
<ul></ul>

that sorted, you can simply float the h1 heading and image to left and the unodered list to the right.

<div class="in"></div> seems to be the prefect element to change the background-color of region above background-image


#3

Thanks, it works.

How to position smaller image at the center. I also want nav bar to shift fem pixels from left. How to shift larger image up and position smaller image over larger image.

Please help.

<!DOCTYPE html>
  <html>
    <head>
	  <meta charset="utf-8">
	  <title> Mukul Vashishtha </title>
      <link href="style.css" type="text/css" rel="stylesheet"> 
	</head>

	<body>
	  <div class="in">
	      <h1 id="name"> Mukul Vashishtha </h1>
		  <ul>
            <li><a href="#">Contacts</a></li>
			<li><a href="#">Profiles</a></li>
		    <li><a href="Resume.pdf">Resume</a></li>
			<li><a href="about.html">About</a></li>
		    <li><a href="text.html">Home</a></li>
          </ul>
		  <img src="2.png" id="img"/>
	  </div>
	  
	  <h1 id ="more"> Hi, I am Mukul. Let me introduce you. </h1>
	<!--  <a href="6.jpg" target="_blank"><img src="6.jpg" id="img"/></a> -->
 	</body>
  </html>
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body, html {
	min-height: 100%;
}

li {
	display: inline-block;
	float: right;
	font-size: 20px;
	padding: 15px;
	width: 5em;
}

a {
	text-decoration: none;
}

#name {
	font-style: Italic;
	margin: 0.5em;
	display: block;
	float: left;
}

#more {
	text-align: center;
	padding: 200px;
	color: white;
	background-image: url('1.jpg');
	background-size: 100%;
	background-repeat: no-repeat;
}

#img {
	border-radius: 100%;
	margin: auto;
	display: block;
}

.in {
	background-color: white;
}

#4

for the overlapping image, you should wrap the current image in a div:

<div>
    <img src="2.png" id="img"/>
</div>

then add the second image to the div

again, why is the image after the unordered list? its on the left side, so it should before:

<div class="in">
	      <h1 id="name"> Mukul Vashishtha </h1>
               <div><img src="2.png" id="img"/><!-- overlapping image here --></div>
		  <ul>
            <li><a href="#">Contacts</a></li>
			<li><a href="#">Profiles</a></li>
		    <li><a href="Resume.pdf">Resume</a></li>
			<li><a href="about.html">About</a></li>
		    <li><a href="text.html">Home</a></li>
          </ul>
		 
	  </div>

now, overlapping the images is tricky

you will certainly need position property, for the rest consider the following:

  • margin
  • top, left, right, bottom

#5

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.