Tips for aligning headings to the left of buttons

Currently working on a webpage but struggling with web design. Here is my HTML code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="https://googledrive.com/host/0B0vEuOxa0lxIajBoRU1UWmdOQjQ/style.css" rel="stylesheet" type="text/css" />
<link href='http://imageshack.us/a/img41/663/iconbg.gif' rel='icon' type='image/gif'/>
<style type="text/css">
BODY
   {font-family:"Segoe Print";
   font-size:25px;
   background-image:url("http://img819.imageshack.us/img819/4145/ld1q.jpg");
   text-align:center;}
</style>
<title>Pointer Calculator...</title>
</head>
<body>
<div style="text-align:right;">
<a class="b" href="?">Home </a>
<a class="b" href=?admin> Admin Login </a>
</div>
<h1 ><a href="?" class="h1">My Heading</a></h1>

I am trying to place the heading at the top and left of the buttons. Any suggestions or help would be greatly appreciated.

htmlcss

Answer №1

You have utilized CSS from Google Drive for the h1 rule with a font-size of 55px, which may be too large. However, I've included this HTML and CSS code that could benefit you.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="https://googledrive.com/host/0B0vEuOxa0lxIajBoRU1UWmdOQjQ/style.css" rel="stylesheet" type="text/css" />
<link href='http://imageshack.us/a/img41/663/iconbg.gif' rel='icon' type='image/gif'/>
<style type="text/css">
    body {
        margin:0px;
        padding:0px;
        font-family:"Segoe Print";
        font-size:25px;
        background-image:url("http://img819.imageshack.us/img819/4145/ld1q.jpg");
        text-align:center;
    }
    #maincontainer {
        width:1000px;
        margin:0px auto;
    }
    #heading ,#headermenu{
        width:50%;
        height:100px;
        float:left;
    }
    #heading>h1{
        position:relative;
        top:-50px;
    }
</style>
<title>Pointer Calculator...</title>
</head>
<body>
<div id="maincontainer">
    <div id="heading">
        <h1 ><a href="?" class="h1">My Heading</a></h1>
    </div>
    <div id="headermenu">
        <a class="b" href="?">Home </a>
        <a class="b" href=?admin> Admin Login </a>
    </div>
</div><!--end of maincontainer -->
</body>
</html>

Answer №2

Give this a try

Here is some HTML code for you to explore

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="https://googledrive.com/host/0B0vEuOxa0lxIajBoRU1UWmdOQjQ/style.css" rel="stylesheet" type="text/css" />
<link href='http://imageshack.us/a/img41/663/iconbg.gif' rel='icon' type='image/gif'/>
<style type="text/css">
BODY
   {font-family:"Segoe Print";
   font-size:25px;
   background-image:url("http://img819.imageshack.us/img819/4145/ld1q.jpg");
   text-align:center;}
</style>
<title>Pointer Calculator...</title>
</head>
<body>

<div style="text-align: right; float: right; margin-top: 25px;">
<a class="b" href="">Home </a>
<a class="b" href=""> Admin Login </a>
</div>
<h1 style="float: left; margin: 0px; padding: 0px;"><a href="" class="h1">Check out My Heading</a></h1>

Answer №3

<div class="header">
        <a href="?" class="h1">Title of My Page</a>
        <a class="b" href="?">Home </a>
        <a class="b" href=?admin> Admin Access </a>    
       <div class="clear"></div>
</div>
<style type="text/css">
    BODY
   {font-family:"Segoe Print";
   font-size:25px;
   background-image:url("http://img819.imageshack.us/img819/4145/ld1q.jpg");
   text-align:center;}
.h1 {
   float:left;
    margin: 0;
}
.b {
    float: right;
}
.clear { clear: both; } 
</style>

Check out the working demo on JsFiddle http://jsfiddle.net/rn5u5/

Answer №4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>::Unique Coding Experience::</title>
<link href="custom.css" rel="stylesheet" type="text/css" />
<script src="js/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="js/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />

<link href="css/dropdown/navigation.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/dropdown/themes/custom/default.advanced.css" media="screen" rel="stylesheet" type="text/css" />

<!--[if lt IE 7]>
<script type="text/javascript" src="js/jquery_library/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery_library/jquery.dropdown.js"></script>
<![endif]-->
</head>

<body>
<center>
<div id="wrapper">
<div id="header">
<div id="header_left">
<div id="logo"><img src="images/logo.png" alt=" " width="233" height="83" /></div>
<img src="images/free-analysis.gif" width="118" height="118" /></div>
<div id="header_right">
<div id="header_bar">
<span class="white_txt">
<img src="images/contact-icon.gif" /> +
<img src="images/mail-icon.gif" /><a href="mailto: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="91f8fff7fed1e6a2fee3f8f6f8ffbff2fefc">[email protected]</a>"> www.</a></span></div>
<div id="follow_us">
<img src="images/follow-us.gif" />
<a href="https://twitter.com/w3origin"><img src="images/twitter-icon.gif" width="45" height="40" border="0" /></a>
<a href="http://in.linkedin.com/pub/w3-origin/23/555/ba3"><img src="images/linkedin-icon.gif" width="46" height="40" border="0" /></a>
<a href="http://facebook.com/w3origin"><img src="images/facebook-icon.gif" width="45" height="40" border="0" /></a></div>
</div>
</div>
<div>
    <ul class="dropdown dropdown-horizontal">
    <li><a href="index.html" class="dir">Home</a></li>
    <li><a href="aboutus.htm" class="dir">About us</a></li>
    <li><a href="services.htm" class="dir">Our Services</a>
    <ul>
            <li><a href="web-design.htm">Web Design</a></li>
            <li><a href="seo-services.htm">SEO Services</a></li>
            <li><a href="digital-marketing.htm">Digital Marketing</a></li>
            <li><a href="graphic-designing.htm">Graphic Designing</a></li>
        </ul>
    </li>
    <li><a href="work.htm" class="dir">Our Work</a>
    <ul>
            <li><a href="portfolio.htm">Portfolio</a></li>
            <li><a href="testimonials.htm">Testimonials</a></li>
            <li><a href="case-studies.htm">Case Studies</a></li>
        </ul>
    </li>
    <li><a href="pricing.htm" class="dir">Pricing</a>
        <ul>
            <li><a href="./">Basic Plan</a></li>
            <li><a href="./">Pro Plan</a></li>
            <li><a href="./">Premium Plan</a></li>
        </ul>
    </li>
    <li><a href="contact.htm" class="dir">Contact</a></li>
    <li class="end"><a href="blog.htm" class="dir">Blog</a></li>
</ul>    
</div>

Answer №5

Let's update the previous style code with the new one!

<style type="text/css">
    body {
        margin:0px;
        padding:0px;
        font-family:"Helvetica Neue";
        font-size:20px;
        background-image:url("http://img123.imageshack.us/img123/4567/abc.jpg");
        text-align:center;
    }
    #container {
        width:100%;
        margin:0 auto;
    }
    #title{
        width:50%;
        height:80px;
        float:left;

    }

    ,#menu{
        width:50%;
        height:80px;
        float:right;
    }
    #title>h1{
        position:relative;
        top:-30px;
        text-align:center;
    }
</style>

Answer №6

body{
font-family:'Georgia', Arial, Verdana;
font-size:12px;
color:#4b4a48;
line-height:18px;
text-decoration:none;
background-color:#f5f5f5;
margin:0px;
padding:0px;}

#wrapper{
width:1000px;
height:auto;
overflow:auto;
text-align:left;
background-color:#FFFFFF;}

#header{
width:auto;
height:147px;
border-bottom:1px solid #FFFFFF;
background-color:#142a38;}

#header_left{
float:left;
width:480px;
padding:15px 0px 0px 0px;}

#logo{
float:left;
padding:30px 70px 0px 40px;}

#header_right{
float:right;
width:500px;}
...
.panel_content{
padding:8px 8px 5px 8px;}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Difficulty in placing the logo within the navigation menu

Currently working on developing a website and encountering challenges with positioning the logo within the navigation bar. A test version of the site can be found at The logo is not centered properly in its designated space, especially in smaller browser ...

htmlcssnavbar

Looking to bookmark Java links or a similar task?

Apologies for the lackluster title, as I am not well-versed in programming language and struggle to articulate my specific request... Allow me to explain: I frequently need to visit a particular website to conduct research (details below). I attempted usi ...

javascriptphphtmlcss

alteration of colors in a Chartist chart

Currently, I am working with a chartist graph where the colors are defined at a framework level. However, I need to make changes to the colors for a specific graph without altering the framework level settings. I attempted to create a .less file, but unfor ...

htmlcssangularjschartist.js

Changing flexbox positioning for 3 divs on mobile screens

Is it possible to align 3 divs differently based on screen width using Bootstrap flexbox classes? For example, I want them to align like the top image below on small widths (<576px) and like the bottom image below on larger widths (>576px). https:// ...

csstwitter-bootstrapbootstrap-4flexbox

What is the best way to choose the next adjacent element using a CSS selector with Python Selenium?

The structure of the DOM is as shown below: <ul> <li> <a href="#" role="button" class="js-pagination link" data-page="1">1</a> </li> <li> <a href="#" role="button" class="js-pagination link active" data ...

javascriptjqueryhtmlcssselenium

Is it feasible to incorporate two distinct images into a single element using CSS layering?

I have a question about setting a background image for a web page using CSS. Currently, I have the following code: body { font-size: 62.5%; /* Resets 1em to 10px */ font-family: Verdana, Arial, Sans-Serif; background-color: #9D5922; color: #000; margin ...

cssimagelayoutz-index

Assigning the CSS class "active" to the navigation menu in ASP Classic

Seeking assistance with setting a CSS class for the current page in an include file that contains the primary navigation menu. Here is my current progress: public function GetFileName() Dim files, url, segments, current 'obtain c ...

cssasp-classicmenuswitch-statement

Avoiding the use of mailto links in PHP

One problem I encountered is with a mailto link in my PHP code: <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3f5a525e56537f5b50525e5651114b535b">[email protected]</a>?subject=<?php rawurlencode ...

phphtml

Issue with Inline forms in Ruby on Rails/HTML: The 'checked' attribute with the value of 'false' is

Desired Setting: I am trying to set the default option for this form to be "No" (or false), however, when I set it as such, my application loads with no option selected. When I use :check => true, the default option selected becomes "Yes" (or true). I ...

htmlcssruby-on-rails

Tips and tricks for customizing the placeholder icon on a search form in Bootstrap - the default display is a search icon

For my WordPress site, I am utilizing the Bootstrap theme. The issue I am facing is that the search form in my navbar is displaying the placeholder as "search" and I am looking to modify it. I tried changing the searchform.php file at a specific line, but ...

phphtmltwitter-bootstrapplaceholdersearch-form

Is there a way to stop the page from scrolling once I reach the bottom of a specific div within it?

My webpage has multiple divs that share a similar structure: <div style="height:200px; overflow:auto;"> <div style="height:300px;"> <!--There is a lot of content here--> </div> </div> When the user hovers ove ...

javascripthtmlscroll

reduce the width and adjust the top margin

Unique responsive design featuring a bold red column on the left and a sleek blue column on the right. The red column contains a striking black element with margin-top:30px As the website is resized, causing the blue column to shift below the red column, ...

csstwitter-bootstrapresponsive-design

Modify the scrollbar's width, color, and corner radius to customize its appearance

Here is the table code where the styles are applied. By setting the tablecontainer height to 600px, we can make the table scrollable. However, I would like to customize the scrollbar with a different color, width, and corner radius. <TableContainer s ...

cssreactjshtml-tablematerial-ui

hiding form fields using javascript

As a beginner in javascript, I am facing a challenge with a set of checkboxes in an HTML form. These checkboxes are generated dynamically from a python script. Among them, there is a checkbox labeled "N/A" that I want to hide automatically when any other c ...

javascriptpythonhtmlforms

Looking for recommendations on effective jQuery plugins for drag and drop file uploading?

Can anyone recommend any drag-and-drop jQuery plugins that offer similar functionality to Gmail's attachment dragging and dropping feature? I would like the ability to track the upload progress. However, I am specifically looking for options without ...

jquerycsshtmldrag-and-drop

Retrieve the background color using code-behind

Despite its humorous appearance, I am having trouble with the Syntax :( I have a background color in my code behind file and need to correct the syntax here so that my Table displays the correct background color: <Table style="background-color:" &apos ...

htmlcssstylesheet

Struggling to design a functional mobile keyboard

I've been working on creating a mobile keyboard, but I'm facing some issues with the JavaScript part. The problem seems to be in my code as the keyboard isn't responding when I try to type. Here's a snippet of the JavaScript I'm us ...

javascriptjqueryhtmlcsskeyboard

After refreshing, the base href in the environment is characterized as undefined

Within my angularjs application, I have configured the env.js file as shown below: (function (window) { window.__env = window.__env || {}; // API url window.__env.apiUrl = 'http://aaaaaaa.com/'; // Base url window.__env.baseUrl = '/angula ...

htmlangularjs

What steps can be taken to activate the remember password feature when using an AJAX login system?

I've developed a web application with a basic login box, utilizing jQuery AJAX for the login process. However, I'm facing an issue with prompting the browser to remember the password. How can I trigger the "Do you want the browser to remember th ...

jqueryhtmlajaxwebauthentication

Identifying CSS on iPhone and iPad: A Guide

I need to adjust the CSS style based on different devices. This is how I currently have it set up: <link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/Destop.css")" media="only screen and (min-width: 1224px)"/> <link rel="s ...

htmlcss